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

//將被綁定到你的模板。