Angular 2 http-在返回可观察对象之前对其进行过滤

Question

在使用中，我有以下定义：

getAllHTTP(): Observable<IUser[]> {
   return this.http.get(`${this.url}/users`)
              .map(res => res.json())
              .catch(err => Observable.throw(err));
}

并在组件中：

ngOnInit() {
   const self = this;
   this._uService.getAllHTTP().subscribe(
      function (data) {
        console.log(data);
        self.listOfUsers = data
      },
      (error) => console.error(error)
   );
}

所以现在我想在将可观察对象传递给组件之前过滤数据，然后执行以下操作：

  getAllHTTP(): Observable<IUser[]> {
     return this.http.get(`${this.url}/users`)
                .map(res => res.json())
                .filter(<IUser>(x) => x.id > 2)
                .catch(err => Observable.throw(err));
  }

而且不起作用。 x in过滤器是实际数组，而不是数组中的项目。 这真的很奇怪，我认为它与RXjs无关，因为它的工作方式与本示例中的假设相同： http ://jsbin.com/nimejuduso/1/edit?html,js,console,output

所以我做了一些挖掘，显然我应该使用flatMap。 好的，我做到了，用flatMap替换了map ，但是现在出现了这个错误：

找不到其他支持对象“ [object Object]”

所以很显然，当我订阅时，我曾经获得一个数组，现在一次只能得到一个对象……为什么Angular2表现得如此？ 还是这个RXjs？

Answer 1

您正在对可观察流应用过滤器，从而对流中的事件进行过滤，而不对数组中的元素进行过滤，在这种情况下，数组中的元素是流中的单个事件。

您需要做的是：

getAllHTTP(): Observable<IUser[]> {
     return this.http.get(`${this.url}/users`)
                .map(res => res.json()
                            .filter(<IUser>(x) => x.id > 2))
                .catch(err => Observable.throw(err));
}

您链接的示例如此工作，因为Observable.from为Observable.from对象创建了一个值序列，而不是为整个数组创建一个单值。 这就是为什么Observable.filter像它那样工作的原因，因为数组元素一次传递一个。 在文档中查看更多详细信息。

Answer 2

似乎您要的是用户列表，因此需要数组。 如果我正确理解了您，则希望所有ID> 2的用户：

return this.http.get(`${this.url}/users`)
            .map(res => res.json())
            .map((users: Array<IUser>) => users.filter(user => user.id > 2)
            .catch(err => Observable.throw(err));