Question

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

这是我的数据电话：

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都显示为每个项目都没有使用每个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);
    });
}

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

<强>更新

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

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

使用flatmap使用参数进行嵌套服务调用

1 个答案: