使用组合的客户端过滤RxJS中的最新运算符不起作用,分配有问题吗?



我正在使用RxJS流在我的Angular应用程序中实现客户端过滤。我已经将所有过滤器和数据转换为可观察量,并实现了用于过滤的命令式逻辑。

作为参考,原始数据流称为displayGroupList$,过滤后的数据流称为filteredList$。我的问题是,即使我没有为 displayGroupList$ 分配或推送任何新值,为什么数据流中的数据会发生变化?

为了详细解释,只有在进行任何筛选操作后,该值才会更改。假设 UI 更改了日期过滤器,第一次迭代给出了正确的 filteredList,但如果再次更改日期过滤器,整个函数将失败,因为displayGroupList现在已更改,假设

保持不变

//ngOnInit Hook
ngOnInit() {
this.displayGroupList$ = of(this.task$.getTasks());
if(!this.displayGroupList$) {
this.task$.setTaskCount(0)
} 
this.groupFilter$ = new BehaviorSubject(0);
this.dateFilter$ = new BehaviorSubject("");
this.titleFilter$ = new BehaviorSubject ("");
//Create filteredList observable to subscribe in html.
this.filteredList$ = this.createFilteredList(this.displayGroupList$, this.groupFilter$, this.dateFilter$, this.titleFilter$);
}     
// Create Filtered List
public createFilteredList(
displayGroupList$ : Observable <Group[]>,
groupFilter$: Observable <number>,
dateFilter$: Observable <string>,
titleFilter$: Observable <string>){
return combineLatest(
displayGroupList$,
groupFilter$,
dateFilter$,
titleFilter$, (displayGroupList:Group[], groupFilter:number, dateFilter:string, titleFilter:string) => {
//When I console.log here,
//for no reason at all the displayGroupList is changed,
//don't understand why. 
console.log(displayGroupList);
if (groupFilter === 0 && dateFilter === "" && titleFilter === "") return displayGroupList;
let tempGroupList = displayGroupList;
if(groupFilter){
tempGroupList =  tempGroupList.filter((group)=> {
return group.id === groupFilter
})
}
if(dateFilter){
for(let group of tempGroupList){
group.tasks = group.tasks.filter((task)=> {
return task.date === dateFilter
})
}
}
if(titleFilter){
for(let group of tempGroupList){
group.tasks = group.tasks.filter((task)=> {
return task.title === titleFilter
})
}
}
return tempGroupList
});
}

如果显示组列表保持不变,我假设过滤器可以完美运行

return combineLatest(
displayGroupList$,
groupFilter$,
dateFilter$,
titleFilter$, (
displayGroupList:Group[], 
groupFilter:number, 
dateFilter:string, 
titleFilter:string
) => { ... });

我不知道这种语法是从哪里来的,但在这里你给你的combineLatest一个匿名函数的结果(即你没有调用的函数(。当然参数是空的!

如果您希望这样做,语法是

return combineLatest(
displayGroupList$,
groupFilter$,
dateFilter$,
titleFilter$
).pipe(
map(([displayGroupList, groupFilter, dateFilter, titleFilter]) => { ... })
);

相关内容

最新更新