如何在Angular中循环观察值4

Question

我有一个部分数组，我试图获取并显示每个部分下的所有项目。这似乎是一个非常简单的要求。这里是我的代码：

//my ngOnInit call this function 
this.sectionService.GetItemList(this.selectedSectionList, this.culture)  
     .subscribe(
      (itemList: ItemBySection[]) => { 
       this.itemBySection = itemList; 

       this.loaded = true; 
      }, 
      (error: any) => this.errorMessage = error,() => 
console.log("loaded") 
     ); 

//this is my function in my service 
public GetItemList(SectionItems: Sections[], strCulture): Observable<ItemBySection[]> { 

    let resultObservable 
    for (var SectionItem in SectionItems) { 
     let url = environment.portalWebServiceURL + "api/section/" + SectionItems[SectionItem].sectionItemID.toString() + "/" + strCulture; 
     resultObservable = this.http.get(url) 
      .catch(this.handleError) 
      .mergeMap(res => <ItemBySection[]>res.json()); 
    } 

    return resultObservable; 

} 

也许我上面的解释是不是太清楚 那么我现在要做的是调用一个循环中我的web服务的多个时间和结果连接成一个列表。也许这会有所帮助。

for all my sectionIDs { 
    call url web service with sectionID 
    receive results from server 
    add the results in my item array 
} 
finally display all items. 

我希望这可以帮到你。

Answer 1

可能问题在于你的http流：res.json（）返回解析为json的响应正文。 所以你应该使用.map（）运算符，而不是.mergeMap（）运算符。

前者只是将转换函数应用于每个流数据并对结果进行流水处理（这就是您需要的），后者将一个observable的所有值投影到流中（而这不是您需要的）。

一些参考：

• flatMap（即mergeMap的别名）：https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/flatmap.html
• 地图：https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/map.html

希望它能帮助:)

**更新* *

好的，我误解了你的需求：你需要d在一系列响应中加入所有http响应。 你可以做这样的事情：

public GetItemList(SectionItems: Sections[], strCulture): Observable<ItemBySection[]> { 
    const resultObservables = [] 
    for (var SectionItem in SectionItems) { 
     let url = environment.portalWebServiceURL + "api/section/" + SectionItems[SectionItem].sectionItemID.toString() + "/" + strCulture; 
     const response = this.http.get(url) 
      .catch(this.handleError) 
      .map(res => <ItemBySection>res.json()); 
     resultObservables.push(response) 
    } 
    return Observable.forkJoin(resultObservables); 
} 

我写了这个代码直接在这里，所以它可能不会工作，但它背后的想法应该是你所需要的:)