我正在使用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]) => { ... })
);