如何在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

您可以在以下代码中使用GetData的代码进行处理map：

// 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