angular - Angular 多重过滤 Observable，rxJS

Question

您好，我想使用 3x 过滤器输入(1x input:text, 2x select)。我有一个 Observable list userList$: Observable<User[]>。在ngOnInit()我过滤这个列表中使用我的input:text.

userList$: Observable<User[]>
inputControl = new FormControl();  // input type text
selectStatus = new FormControl();  // select
filteredData$:any;

ngOnInit(){
   this.filteredData$ = combineLatest(
      this.userList$,
      this.inputControl.valueChanges.pipe(
        startWith(""),
        debounceTime(400)
      )
    ).pipe(
      distinctUntilChanged(),
      filter(([list, input]) => Boolean(list)),
      map(([list, input]) => {
        return list.filter(
          ({login}) => !input || login.toLowerCase().indexOf(input) !== -1);
      })
    );  
    this.userList$ = this.filteredData$;
}

当我再添加一个过滤器时，第一个过滤器不起作用..当我使用 2x 过滤时的代码：

ngOnInit(){
    this.filteredData$ = combineLatest(
      this.userList$,
      this.inputControl.valueChanges.pipe(
        startWith(""),
        debounceTime(400)
      )
    ).pipe(
      distinctUntilChanged(),
      filter(([list, input]) => Boolean(list)),
      map(([list, input]) => {
        return list.filter(
          ({login}) => !input || login.toLowerCase().indexOf(input) !== -1);
      })
    );  
    this.filteredData$ = combineLatest(
      this.userList$,
      this.selectStatus.valueChanges.pipe(
        startWith(""),
        debounceTime(400)
      )
    ).pipe(
      distinctUntilChanged(),
      filter(([list, input]) => Boolean(list)),
      map(([list, input]) => {
        if(input == 1){
          return list.filter(
            ({is_banned, is_deleted}) =>  is_banned !== 1 || is_deleted !== 1);
        }else if (input == 2){
          return list.filter(({is_banned}) => is_banned == 1 );
        }else{
          return list.filter(({is_deleted}) => is_deleted == 1 );
        }
      })
    );
    this.userList$ = this.filteredData$;
 }

使用 3x 过滤器字段时如何过滤此列表？

标签： angularrxjsobservablefiltering