Фильтрация на стороне клиента с оператором combLatest в RxJS не работает, что-то не так с назначением?

Question

Я внедряю фильтрацию на стороне клиента в моем приложении Angular с использованием потоков RxJS. Я преобразовал все свои фильтры и данные в наблюдаемые и реализовал императивную логику для фильтрации тоже.

Для справки, исходный поток данных называется displayGroupList $, а отфильтрованный поток данных называется FilterList $. Мой вопрос заключается в том, что, хотя я не присваиваю или не выдвигаю никакое новое значение для displayGroupList $, почему данные изменяются в потоке?

Чтобы объяснить подробно, значение изменяется только после выполнения какой-либо операции фильтрации. Предположим, что пользовательский интерфейс изменил datefilter, первая итерация дает правильный FilterList, но если datefilter снова изменяется, вся функция завершается ошибкой, потому что 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
      });
}

ЕслиdisplayGroupList остается неизменным, я предполагаю, что фильтр будет работать идеально

Answer 1

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]) => { ... })
);