Angular Material table 未调用 filterPredicate

Question

我有一个自定义的 filterPredicate，我曾处理示例数据，但现在我正在使用请求服务从 API 获取数据，但未被调用。我查看了 Stack Overflow 的其他答案，但 none 让我走上了正确的轨道。

table确实过滤了。我在 HTML 中有一个调用 applyFilter 方法的输入。

如有任何帮助，我们将不胜感激。我尝试将 filterPredicate 移动到 OnInit 方法，但这对功能没有影响。

这是获取数据的 ngOnInit 代码：

    this.subs.add(this.requestService.get$()
      .subscribe((res) => {
        console.log(res);
        this.dataArray = res;
        this.dataSource = new MatTableDataSource<ICompletedRequest>(this.dataArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
        (err: HttpErrorResponse) => {
          console.log(err);
        }));
  }

以及ngAfterViewInit中的代码。控制台记录 ngAfterViewInit 和 'ngAfterViewInit done。确实会出现在控制台中，但不会显示 'got here'、'filter' 或 textToSearch，这表明谓词正在设置但从未被调用。

    this.dataSource.filterPredicate =
    (data: ICompletedRequest , filter: string): boolean => {
      console.log('got here');
      var splitted = filter.split(" ", 10);

      // Must match on all items or return false
      for (let entry of splitted) {
        var textToSearch = data.requestorFirstName + " " + data.requestorLastName + " " + data.requestTypeDescription + " " + this.datepipe.transform(data.completedOn, 'MM/dd/yyyy') + " " +  data.managerFirstName + ' ' + data.managerLastName;
        textToSearch = textToSearch.toLowerCase();
        console.log("Filter");
        console.log(textToSearch);

        if ( !(textToSearch.includes(entry.toLowerCase()))) return false;

      }
      return true;
    };

最后是 applyFilter 方法

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase(); 
  }

Answer 1

我将筛选器移动到添加订阅的位置后，我就开始工作了

this.subs.add(this.requestService.get$('67425693-1142-4E02-B104-733DD26C5F47')
      .subscribe((res) => {
        console.log(res);
        this.dataArray = res;
        this.dataSource = new MatTableDataSource<ICompletedRequest>(this.dataArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.filterPredicate =
        (data: ICompletedRequest , filter: string): boolean => {
          console.log('got here');
          var splitted = filter.split(" ", 10);
    
          // Must match on all items or return false
          for (let entry of splitted) {
            var textToSearch = data.requestorFirstName + " " + data.requestorLastName + " " + data.requestTypeDescription + " " + this.datepipe.transform(data.completedOn, 'MM/dd/yyyy') + " " +  data.managerFirstName + ' ' + data.managerLastName;
            textToSearch = textToSearch.toLowerCase();
            console.log("Filter");
            console.log(textToSearch);
    
            if ( !(textToSearch.includes(entry.toLowerCase()))) return false;
    
          }
          return true;
        };
      },
        (err: HttpErrorResponse) => {
          console.log(err);
        }));

Angular Material table 未调用 filterPredicate

Angular Material table filterPredicate not invoked

angular

angular-material

angular-material-table