时间戳

首页 > 解决方案 > 过滤谓词函数不返回任何内容并且无法读取属性“数据” - MatTableDataSource 角度

javascript - 过滤谓词函数不返回任何内容并且无法读取属性“数据” - MatTableDataSource 角度

问题描述

当我们在搜索栏中输入第一个字母时，下面的函数第一次不起作用，它在数组中没有返回任何内容，后来当我们删除字母并继续输入时，它工作正常。

createFilterPredicate() {
    let myFilterPredicate = function(data:any, filter:string): boolean {
      console.log('data:', data);
      let searchString = JSON.parse(filter);
      return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&      
      data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
    }
    return myFilterPredicate;
  }

实际上，当我调试时，我看到它正在进入函数。之后它没有进入myFilterPredicate函数并且控制台中没有数据并且什么都不返回。什么问题以及如何找到它？

完整代码如下：

ngOnInit(): void {
this.admissionNoFilter.valueChanges.subscribe((admissionno) => {
      this.filteredValues['admissionno'] = admissionno;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });
    this.studentNameFilter.valueChanges.subscribe((firstname) =>{
      this.filteredValues['firstname'] = firstname;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });
    this.dataSource.filterPredicate = this.createFilterPredicate();
 }

createFilterPredicate() {
    let myFilterPredicate = function(data:any, filter:string): boolean {
      console.log('data:', data);
      let searchString = JSON.parse(filter);
      return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&      
      data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
    }
    return myFilterPredicate;
  }

组件.html

<table mat-table [dataSource]="dataSource" matSort>

          <ng-container matColumnDef="admissionno">
              <th mat-header-cell *matHeaderCellDef> <Strong> Admission No </Strong> 
                <div>
                  <mat-form-field>
                    <input matInput class="form-field" [formControl]="admissionNoFilter" placeholder="Filter">
                  </mat-form-field>
                </div>
              </th>
              <td mat-cell *matCellDef="let element"> {{element.admissionno}} </td>
          </ng-container>

          <ng-container matColumnDef="firstname">
              <th mat-header-cell *matHeaderCellDef > <Strong> Student Name </Strong>
              <div>
                <mat-form-field>
                  <input matInput class="form-field" [formControl]="studentNameFilter" placeholder="Name Filter">
                </mat-form-field>
              </div>
              </th>
              <td mat-cell *matCellDef="let element"> {{element.firstname + ' ' + element.lastname}} </td>
          </ng-container>

</table>

标签： javascriptangularangular-material

解决方案

这里的问题是，一旦您的函数调用返回，您的 let 属性就会被破坏。

将创建过滤谓词更改为：-

createFilterPredicate(data:any, filter:string) {
      console.log('data:', data);
      let searchString = JSON.parse(filter);
      return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&      
      data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
  }

并将其分配给数据源，例如：-

this.dataSource.filterPredicate = this.createFilterPredicate;

推荐阅读