Angular 如何修复.subscribe的异步执行并将数据绑定在一起？

我需要调用一个API，它给我两个值：一个链接和一个id。 看起来像这样的例子：

{'link' : ['link1','link2'], 'id' : ['id1','id2']}

每个链接都是一个API，所以我在for循环中再次调用它们，然后检索类型为Movie的数据，将其添加到movies中，并使用回调发送

问题是id不能正确绑定到链接，因为我使用.subscribe，有时我会将id1分配给link2

代码如下：

onSubmit() {
    this.submitted = true;

    if (this.searchForm.invalid) {
        return;
    }
    //call first API
    this.movieService.getMovieLink(this.f.search.value) 
        .subscribe(response => {
          this.idStr = response['link']  // string of links
          this.myIdS = response['id']   // string of id's

          for (let index in this.idStr) {
            this.myId = this.myIdS[index] 
            this.movieService.id = this.idStr[index]; 
            //call API I got from links
            this.movieService.getMovie2()  
                  .subscribe( response => {

                        this.movies.push({
                        // this does not correspond to the actual id
                        id : this.myId,  
                        name : response['Title'],
                        releaseDate : response['Released'],
                        genres : response['Genre'],
                        description : response['Plot'],
                        starRating : response['imdbRating'],
                        imageUrl : response['Poster']
                      })  
                      //send data from .subscribe with a function
                      if (Number(index) == this.idStr.length - 1) {
                             this.mycallback(this.movies)
                      }

                    },
                    err => {console.error(err)
                 })  
          }    
          this.movies = [];
})
}

---

我的问题是如何将链接与id绑定，以便电影中的值对应？

使用mergeMap/flatMap而不是多个订阅

this.movieService.getMovieLink(this.f.search.value) 
        .mergeMap(response => {
          let links = response['link']  // array of links
          let ids = response['id']   // array of ids

          return ids.map( (myId,index) => {
            let link = links[index];  // <-- where is this used ?
            return this.movieService.getMovie2() // <-- probably pass link here instead of depending on side-effect by setting movieService.id 
                  .map( res =>   
                        ({
                        id : myId,  
                        name : response['Title'],
                        releaseDate : response['Released'],
                        genres : response['Genre'],
                        description : response['Plot'],
                        starRating : response['imdbRating'],
                        imageUrl : response['Poster']
                        })
                     )
                 })  
          })
}).subscribe(val => //should give you the array you are expecting...

this.movieService.getMovieLink（this.f.search.value）
.mergeMap（响应=>{
let links=response['link']//链接数组
让id=response['id']//id数组
返回id.map（（myId，index）=>{
让link=links[index]；///应该为您提供所需的数组。。。

this.myId=this.myId[index]

每次API响应时都重新分配类的myId属性，因此this.myId的值不可靠。例如，您创建了一个请求a，然后请求B，但请求B在请求a之前完成，然后该值以不正确的顺序更改

因此，与其使用

this.movies.push（…）

及

id:this.myId

，请使用

this.movies[index] = ...

及

---

希望这能有所帮助

问题是询问实施的逻辑。

id: this.idStr[index]