如何在 Angular 2 中修改 Observable 中的数据？

Question

我正在学习 Angular 2 和 Typescript。我正在构建一个简单的 Web 应用程序，它从 WEB API 获取数据并将其显示在列表中。然后，一旦用户单击列表中的项目，他们就会被带到详细信息页面。

我创建了一项服务来进行 API 调用，该调用执行以下操作：

   GetData() { 
         let data = this.http.get('http://server.name/api/GetData')
                  .map((res) => res.json());
         return data; 
   }

然后在一个组件中，我像这样订阅数据：

      this.myService.GetData()
      .subscribe((myService) => this.items = myService);

当 http.get 返回时，我想在从 GetData() 方法返回之前对 JSON 对象进行一些处理。例如，添加一个名为 ID 的新属性。基本上类似于下面的伪代码：

 for each(item in data) { 
     item.ID = newID(); //method for creating IDs 
 }

1. 这是可以做到的吗？
2. 如果是，是应该做的事情，还是有更好的方法来完成我想要做的事情？

谢谢

Answer 1

您可以在 map 内的 GetData 代码中进行处理：

// For RxJS v5 
    this.http
      .get('http://server.name/api/GetData')
      .map(result => {
         const items = <any[]>result.json(); // could be SomeItem[] instead of any[]
         items.forEach(item => item.ID = ...);
         return items;
      });

// For RxJS v6 
    this.http
     .get('http://server.name/api/GetData')
     .pipe(map(result => {
        const items = <any[]>result.json(); // could be SomeItem[] instead of any[]
        items.forEach(item => item.ID = ...);
        return items;
      }));

然后，当您收到订阅中的对象时，应为这些项目分配 ID。

这是对 RxJs Observable 文档的参考：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map

Answer 2

这个想法是：

• 得到结果
• 映射结果以仅获取 json
• 由于您的 json 是一个数组，因此为每个数据生成一个 Observable，然后更改其 id 并将数据发回
• 将它们重新收集到一个数组中

之所以使用mergeMap（在rxjs 5.5+ 中替换了flatMap）操作符，是因为Observable 操作符总是会返回一个Observable，但是由于我们在结果本身内部创建了一个Observable，它会产生一个Observable>，mergeMap 会删除一个Observable 层。希望这会有所帮助

GetData():Observable<WhateverWithIDInside[]> { 
  let data = this.http.get('http://server.name/api/GetData')
    .map(res => res.json())
    .mergeMap(dataArr =>
      Observable.from(dataArr)
        .map(data => {
          data.ID = newID();
          return data;
        })
        .toArray()
   );
}