Можно ли использовать оператор rxjs take для ограничения наблюдаемых, возвращаемых из службы?

Question

Я очень плохо знаком с angular, и я учусь, работая на веб-сайте, который требует, чтобы я перечислил ограниченный список из 4 автомобилей на домашней странице, поэтому я создал сервис, который выбирает все автомобили, как показано ниже.

import { Response } from '@angular/http';
import { Car } from '../classes/car';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class CarService {

rootURL = 'http://localhost:3000/cars';

constructor(private _http: HttpClient) {}

getCars(): Observable<Car[]> {
 return this._http.get<Car[]>(this.rootURL);
}
}

и затем на моем компоненте рекомендуемых автомобилей, я получаю доступ к сервису при инициализации компонента, как показано ниже

constructor(private _carService: CarService ) { }

ngOnInit() {
  this._carService.getCars()
  .take(4)
  .subscribe(data => this.cars = data,
  error => this.errorMessage = <any>error);
}

Итак, компоненты рекомендуемых автомобилей работают, но он дает мне список всехавтомобили из API, в то время как мне нужно показать только 4 машины, я пытался использовать оператор Rxjs 'take` и не работает?где может быть не так?

Answer 1

Emit предоставил количество значений до завершения.

Зачем использовать take

Если вас интересует только первое установленное количество выбросов, вы хотите использовать take.Может быть, вы хотите увидеть, на что пользователь нажал в первый раз, когда он / она впервые зашел на страницу, вы бы хотели подписаться на событие клика и просто сделать первый показ.Есть гонка, и вы хотите наблюдать за гонкой, но вас интересует только первый, кто пересекает финишную черту.Этот оператор понятен и понятен, вам просто нужно увидеть первые n чисел эмиссии, чтобы сделать все, что вам нужно.

взято из learn-rxjs

оператор take не используется для ограничения количества данных из возвращаемого массива.Вы можете использовать обычную функцию JavaScript Array.slice для управления массивом.

ngOnInit() {
    this._carService.getCars()
    .subscribe(data => this.cars = data.slice(0, 4),
    error => this.errorMessage = <any>error);
}

Answer 2

Вы можете использовать оператор JavaScript slice.

ngOnInit() {
  this._carService.getCars()
  .take(4)
  .subscribe(
     data => this.cars = data.slice(0, 4),
     error => this.errorMessage = <any>error);
}