Angular RxJS中使用CombineTest运算符的客户端筛选不起作用,分配是否有问题?
我正在使用RxJS流在Angular应用程序中实现客户端过滤。我已经将我所有的过滤器和数据转换为可观察的,并实现了过滤的命令逻辑 作为参考,原始数据流称为displayGroupList$,过滤后的数据流称为filteredList$。我的问题是,即使我没有向displayGroupList$分配或推送任何新值,为什么数据流中的数据会发生更改 要详细说明,该值仅在进行任何筛选操作后才会更改。假设UI更改了datefilter,第一次迭代给出了正确的filteredList,但是如果datefilter再次更改,整个函数将失败,因为Angular RxJS中使用CombineTest运算符的客户端筛选不起作用,分配是否有问题?,angular,rxjs,Angular,Rxjs,我正在使用RxJS流在Angular应用程序中实现客户端过滤。我已经将我所有的过滤器和数据转换为可观察的,并实现了过滤的命令逻辑 作为参考,原始数据流称为displayGroupList$,过滤后的数据流称为filteredList$。我的问题是,即使我没有向displayGroupList$分配或推送任何新值,为什么数据流中的数据会发生更改 要详细说明,该值仅在进行任何筛选操作后才会更改。假设UI更改了datefilter,第一次迭代给出了正确的filteredList,但是如果datefil
displayGroupList
现在已更改,并且假定保持不变
//恩戈尼尼特钩
恩戈尼尼特(){
this.displayGroupList$=的(this.task$.getTasks());
如果(!this.displayGroupList$){
此.task$.setTaskCount(0)
}
this.groupFilter$=新行为子对象(0);
this.dateFilter$=新行为主体(“”);
this.titleFilter$=新行为主体(“”);
//创建filteredList observable以在html中订阅。
this.filteredList$=this.createFilteredList(this.displayGroupList$、this.groupFilter$、this.dateFilter$、this.titleFilter$);
}
//创建筛选列表
公共createFilteredList(
displayGroupList$:可观察,
groupFilter$:可观察,
dateFilter$:可观察,
titleFilter$:可见){
返回组合测试(
displayGroupList$,
groupFilter$,
日期筛选器$,
titleFilter$,(displayGroupList:Group[],groupFilter:number,dateFilter:string,titleFilter:string)=>{
//当我在这里输入console.log时,
//毫无原因地,displayGroupList被更改,
//我不明白为什么。
console.log(displayGroupList);
if(groupFilter==0&&dateFilter===“”&&titleFilter===“”)返回displayGroupList;
让tempGroupList=displayGroupList;
if(groupFilter){
tempGroupList=tempGroupList.filter((组)=>{
return group.id==groupFilter
})
}
如果(日期过滤器){
for(让临时组列表的组){
group.tasks=group.tasks.filter((任务)=>{
返回任务。日期===dateFilter
})
}
}
if(滴定过滤器){
for(让临时组列表的组){
group.tasks=group.tasks.filter((任务)=>{
return task.title==titleFilter
})
}
}
返回临时组列表
});
}
如果displayGroupList保持不变,我假设过滤器可以正常工作
return combineLatest(
displayGroupList$,
groupFilter$,
dateFilter$,
titleFilter$, (
displayGroupList:Group[],
groupFilter:number,
dateFilter:string,
titleFilter:string
) => { ... });
我不知道这个语法是从哪里来的,但是这里你给你的combinelatetest
一个匿名函数(即你没有调用的函数)的结果。当然参数是空的
如果您希望这样做,语法是
return combineLatest(
displayGroupList$,
groupFilter$,
dateFilter$,
titleFilter$
).pipe(
map(([displayGroupList, groupFilter, dateFilter, titleFilter]) => { ... })
);
因此,您的问题是当您设置
filteredList$
时,displayGroupList$
流的值发生了更改?我不太明白你的问题。您能再解释一下吗?确切地说,displayGroupList$需要保持不变,因为它在整个代码中没有被触及,但每次CombineTest运行时它都会不断更改为filteredList$值。我认为问题在于您在这一行中引用了原始列表let tempGroupList=displayGroupList代码>并通过更改引用更改原始列表。一个快速修复方法是创建一份原始列表的副本。请参阅:或尝试let tempGroupList=displayGroupList.slice()
遵循上述代码,但displayGroupList
与filteredList
的更改问题仍然存在。如果这不是进行具有多个输入源的客户端筛选的正确方法,请建议一种更健壮的方法。@NishanthSubramanya请提供一个示例。您只提供了您认为相关的代码,但就我所知,您可能会在某个地方执行display=filter
。。。我能帮你成功!