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正在工作的原因，因为数组元素一次传递一个。请参阅docs。

中的详细信息

Answer 2

好像你要求一个用户列表，因此就是数组。如果我找到你，你想要所有id为＆gt;的用户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));

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

2 个答案: