Angular 2 http - 在返回之前过滤observable

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

所以现在我想在将observable传递给组件之前过滤数据,我这样做了:

  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滤波器是一个实际的阵列,而不是阵列中的项目.这真的很奇怪,我认为它与RXjs无关,因为它的工作方式与本例中的假设相似:http://jsbin.com/nimejuduso/1/edit？html,js,console,output

所以我做了一些挖掘,显然我应该使用flatMap.好的,我这样做了,取而代之map,flatMap但现在我收到了这个错误:

找不到支持对象'[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创建一个值序列,而不是作为整个数组的单一值.这就是为什么它Observable.filter正在工作,因为数组元素一次传递一个.查看文档中的更多详细信息.