Angular2 RxJs：简单的取（）从HTTP返回观察到

Question

我只是尝试.take(5)从HTTP返回观察到：

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

，并用它在HTML像这样：

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

这工作。但我得到全部的记录，我只想5.我做错了什么？谢谢。

在_Service我返回HTTP观察到：

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

Answer 1

这.take(5)将5发你的观察的，而不是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

//将被绑定到你的模板。