使用平面图进行带参数的嵌套服务调用

Question

我正在进行一个服务调用，从 json 文件中返回包含一堆项目的数据，但是在获取所有项目之后，我需要进行另一个服务调用以获取每个项目的内容。我正在使用平面图，但我在如何传递参数方面遇到了一些麻烦 - 当我尝试它时，它在代码中作为错误带有下划线。

这是我的数据调用：

getItems(){
    this.itemService.getItemsData().flatMap(
      data => {this.items = data;
      error => this.errorMessage = <any>error;
      return this.itemService.getItemContent();
    }).subscribe(data => {
        this.itemContent = data;
      });
  }

当我尝试传递给...getItemContent(this.items.contentUri)时，它给了我一个错误。

 getItemsData(){
        return this._http.get(url)
        .map((res:Response) => res.json())
        .map((obj) => Object.keys(obj).map((key)=>{return obj[key]}))
        .catch(this.handleError);
    }
 getItemContent(uri){
        return this._http.get(uri)
        .map((res:Response) => res.json())
        .catch(this.handleError);
    }

我应该如何正确执行此操作，以便在我获取项目时也可以根据参数调用以获取项目内容？

这里是 json 结构的示例：

{
  Item 1: {
     title:....
     id:....
     content:{
        uri:"link"
     }
  }
}

更新：

getItems(){
    this.itemService.getItemsData().flatMap(
      data => {this.items = data;
      for(let x of data){
          var url = x.content.uri;
           this.observables.push(this.itemService.getInnerItemData(url));
      }
      return Observable.forkJoin(this.observables);
    }).subscribe(data => {
        this.itemsContent = data;
      });
  }

HTML:

<div *ngFor="let item of items">
    {{item.title}}
    <div *ngFor="let content of itemsContent">
      {{content.infoText}}
    </div>
</div>

现在在我的显示器中，item.title 按预期正确显示，但每个项目中的内容显示为 [object][object] 的数组，似乎所有 itemsContent 都显示为每个项目设置，并且没有指定每个项目的内容以及所属项目。

Answer 1

使用 forkJoin 进行并行请求。

getItems(){
    this.itemService.getItemsData().flatMap(
      data => {
      this.items = data;
      var observables = [];
      for(let x of data){
          var url = x.content.uri;
          observables.push(this.itemService.getItemContent(url));
      }
      return Observable.forkJoin(observables);
    }).subscribe(data => {
        console.log(data);
    });
}

然后在您的订阅中，您将看到针对您的项目内容的一系列响应。

更新

在您看来，您可以跟踪项目的索引并显示索引项目的内容，如下所示：

<div *ngFor="let item of items; let i = index;">
    {{item.title}}
    <dic>
        {{itemsContent[i]?.infoText}}
    </div>
</div>

使用平面图进行带参数的嵌套服务调用

using flatmap to make nested service call with parameter

json

typescript

flatmap