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 
 }

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

谢谢

Answer 1

您可以在map：

中的GetData代码中进行处理

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;
  });

然后，当您收到订阅中的对象时，这些项目应分配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＆gt;，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()
   );
}

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

2 个答案: