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 элементов этого содержащего данные.

Вы должны ограничить его до 5 в своей функции .map.

Или .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 будет связан с вашим шаблоном.