Блог

У меня есть 3 значения фильтра (в основном поля выбора). Когда происходит изменение выбора, я хочу запустить комбинированный вызов API вместе с другими значениями фильтра, выбранными ранее (используя BehaviorSubject для каждого фильтра). К сожалению, в «combineLatest» я вижу только 1 значение фильтра. Другие ценности из других предметов исчезают. Пожалуйста, помогите мне понять, в чем я ошибаюсь:

Обслуживание:

 private typeFilterSubject = new BehaviorSubject('');
typeFilterObs$ = this.typeFilterSubject.asObservable();

private priceFilterSubject = new BehaviorSubject('');
priceFilterObs$ = this.priceFilterSubject.asObservable();

private brandFilterSubject = new BehaviorSubject('');
brandFilterObs$ = this.brandFilterSubject.asObservable();

updateTypeFilter(filter) {
  this.typeFilterSubject.next(filter);
}
updatePriceFilter(filter) {
  this.priceFilterSubject.next(filter);
}
updateBrandFilter(filter) {
  this.brandFilterSubject.next(filter);
}

getData$ = combineLatest([
  this.typeFilterObs$,
  this.priceFilterObs$,
  this.brandFilterObs$
]).pipe(
  switchMap(([type, price,brand]) => {
    console.log([type, price, brand]);

    // here i am getting ["electronics","",""]
    // or [14, "", ""] or ["IKEA", "", ""]
    // instead of ["electronics", 14, "IKEA"]

    return this._http.get<IProduct[]>(
      `http://localhost:3000/products?type=${type}amp;price=${price}amp;brand=${brand}`
    );
  })
);
 

Компонент -1 : откуда запускается «следующий»

 onTypeChanged() {
  this._appService.updateTypeFilter(this.typeSelected) //"Electronics"
}

onBrandChanged() {
  this._appService.updateTypeFilter(this.brandSelected) //"IKEA"
} 

onPriceChanged() {
  this._appService.updateTypeFilter(this.priceSlected) //14
}
 

компонент 2 — откуда я подписываюсь на объединенные данные

 this.getData = this._appService.getData$
 

Понял,

Просто нужно было внести изменения в компонент 1, я вызывал «updateTypeFilter» для всех фильтров. Лол.

  onTypeChanged() {
    this._appService.updateTypeFilter(this.typeSelected)
  }

  onBrandChanged() {
    this._appService.updateBrandFilter(this.brandSelected)
  }

  onPriceChanged() {
    this._appService.updatePriceFilter(this.priceSlected)
  }