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