Angular 带api请求的角度RxJS映射

在我的一个路由解析程序中，我想获取API调用返回的Animal[]的动物列表。对于每种动物，我需要一个额外的API调用来获取品种名称。 我试过这个：

return this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
  map(animals => animals.map(animalObs => {
    // return animalObs;
    return animalObs.pipe(
      map((animal: Animal) => {
        animal.ani_breed = this.breedService.get(animal.anb_id).pipe(
          map(breed => {
            return breed.anb_name;
          })
        );
        return animal;
      }),
    );
  })),
);

但我在编译时遇到了一个错误：“Observable”类型不可分配给“string”类型。[2322]

---

我想我错过了什么。。。请帮忙

我认为您需要的是一个mergeMap，它将您当前的请求合并到另一个请求，该请求将使用forkJoin请求所有返回的动物，并将其合并在一起

  getAnimals = () => this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
    mergeMap(animals =>
      Observable.create((observer: Observer<any[]>) => {
        const animals$ = animals.map(
          animal => this.breedService.get(animal.anb_id).pipe(
            map(breed => {
              return {
                ...animal,
                breed_name: breed.anb_name
              }
            })
          )
        );

        forkJoin(animals$).subscribe(result => {
          observer.next(result);
          observer.complete();
        });
      }))
  );

最终编辑

Spread运算符允许您枚举所有对象属性。它的输出与下面的代码相同，但过程不同

  map(breed => {
    animal.breed_name = breed.anb_name;
    return animal;
  })

---

实际的实现取决于您是希望顺序运行请求还是并行运行请求，但您可以按照以下示例执行：

this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
  mergeMap(animals => {
    const animals$ = animals.map(animal => this.breedService.get(animal.anb_id).pipe(
      map(breed => {
        animal.ani_breed = breed;
        return animal;
      })
    ))

    return forkJoin(...animals$);
  }),
);

---

你好@Riyens，谢谢你的回复。这样做，只需给我的品种名称为result@LouisRocher这就是我在你的实施中看到的。我可以知道你期望的输出是什么吗？我想有一个动物数组，它的品种名称是一个字符串，一个是动物对象。谢谢你的时间更新。我希望我所解释的一切都有意义/理解，以便其他ppl在遇到相同问题时也能应用它

this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
  mergeMap(animals => {
    const animals$ = animals.map(animal => this.breedService.get(animal.anb_id).pipe(
      map(breed => {
        animal.ani_breed = breed;
        return animal;
      })
    ))

    return forkJoin(...animals$);
  }),
);