RxJS combineLatest:无法与 Angular 12 中的最新值合并

RxJS combineLatest: Unable to merge with latest values in Angular 12

我有 3 个过滤器值(基本上是 select 个框)。当 selection 发生变化时,我想触发组合 API 调用以及之前 selected 的其他过滤器值(对每个过滤器使用 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}&price=${price}&brand=${brand}`
    );
  })
);

Component -1 : 'next' 被触发的地方

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)
  }