Angular2 RxJs：来自 http 的简单 take() 返回 observable

Question

我只是尝试从 http 返回的 observable 中 .take(5)：

this.dataObservable = this._service.getData()
                                   .take(5);

并像这样在 HTML 中使用它：

<tr *ngFor="let record of dataObservable | async">

这行得通。但我得到所有记录，我只想要 5。我做错了什么？谢谢。

在 _service 我返回 http observable：

getData(): Observable<any> {
  url = '/getData';
  this._data = this._http.get(url)
    .map(response => this.extractData(response));
  return this._data;
}

Answer 1

这个.take(5) 将需要 5 个 Observable 发射，而不是包含数据的 5 个元素。

您应该在 .map 函数中将其限制为 5。

或.subscribe 到那个可观察对象，在那个函数中，你将限制传入的数据，将其存储在一个本地变量中，该变量将绑定到你的模板。

getData(): Observable<any[]> { // returns an array, right??
  url = '/getData';
  this._data = this._http.get(url)
    .map(response => this.extractData(response));
  return this._data;
}

// 在你的组件中

this.yourService.getData().subscribe(
   dataArray => this.data = dataArray.slice(0, 5),
   err => console.log(err)
);

this.data 将绑定到您的模板。