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