как использовать RX js отчетливо по массиву объекта

Question

Я уже советовался с другими вопросами по этому вопросу, но я не вытащил паука из дыры. Я должен использовать отличные на массиве объектов, с кодом, который я предлагаю вам, отличные не работают, и у меня нет ошибок в консоли. Как я могу заставить его работать?

carRecent

export class CarRecent {

    id:number;
    carId:number;
    userId:number;
    imageURL:string;

}

carsService

 getRecentCars(userId){

    let params = new HttpParams().set('userId', userId);
    let options = {headers:this.headers, params:params};

    return this.http.get<CarRecent[]>(this.host + 'getRecentCars', options);

  }

недавний автомобиль. component.ts

export class RecentCarsComponent implements OnInit {

  url:string = 'assets/';

  recentCars = new BehaviorSubject<CarRecent[]>(null);
  subscriptionRecentCars;

  constructor( public carsService:CarsService, public authService:AuthenticationService ) { }

  ngOnInit(): void {

    this.loadRecentCars();

  }

  loadRecentCars(){

    this.subscriptionRecentCars = this.carsService.getRecentCars(this.authService.currentUserValue.id)
    .pipe( 
      tap( cars => console.log(cars) ),
      distinct( (car:any) => car.carId )
    )  
    .subscribe({
        next:cars => {
          this.recentCars.next(cars);
        }
      })

  }

}

Answer 1

Rx JS операторы часто путают с функциями массива, но они работают со всем значением, возвращаемым наблюдаемой - они не указывают c для массивов.

В вашем случае вы хотите вернуть отдельный массив объектов на основе некоторого ключа. Вы хотите преобразовать массив, возвращаемый наблюдаемой, в другое значение - подмножество массива. При преобразовании данных в канале используйте оператор map.

Как только вы окажетесь внутри оператора map, вы можете уменьшить массив, чтобы он возвращал различные значения.

ngOnInit() {

  this.carsService.getRecentCars(this.authService.currentUserValue.id)
    .pipe( 
      tap(cars => console.log(cars)),
      map(cars => {
        const uniques = new Set();
        return cars.reduce((arr, current) => {  
          if (!uniques.has(current.carId)) {
            arr.push(current);
            uniques.add(current.carId);
          }
          return arr;
        }, []);
      })
    ).subscribe({ 
      next:cars => {
        this.recentCars.next(cars);
      }
    });  
}

Я использовал Set, чтобы избежать избыточных итераций массива.

DEMO: https://stackblitz.com/edit/angular-8qnsp8