Javascript 筛选器谓词函数首次不返回任何内容MatTableDataSource 7

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

 customFilterPredicate() {
    this.dataSource.filter = JSON.stringify(this.filteredValues);
     let myFilterPredicate = function (data: LabelElement, filter: string) : boolean{
      let searchString = JSON.parse(filter);
      return data.referenceNumber.toString().toLowerCase().indexOf(searchString.referenceNumber.toLowerCase()) !== -1 && data.referenceNumberDetails.toString().toLowerCase().indexOf(searchString.Href.toLowerCase()) !== -1;//|| data.referenceNumberDetails.toString().toLowerCase().includes(searchString.Href);
    }

    return myFilterPredicate;
  }

实际上，当我调试时，我看到它正在进入函数并到达第一行

this.dataSource.filter=JSON.stringify（this.filteredValues）
之后，它不会进入
myFilterPredicate
函数，并且不返回任何内容

完整代码如下：

addReferenceFilter(){
    this.refFilter.valueChanges.subscribe((refFiltervalue) => {
      this.filteredValues['referenceNumber'] = refFiltervalue;
      this.dataSource.filterPredicate = this.customFilterPredicate();
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    });

  }

  customFilterPredicate() {
    this.dataSource.filter = JSON.stringify(this.filteredValues);
     let myFilterPredicate = function (data: LabelElement, filter: string) : boolean{
      let searchString = JSON.parse(filter);
      return data.referenceNumber.toString().toLowerCase().indexOf(searchString.referenceNumber.toLowerCase()) !== -1 && data.referenceNumberDetails.toString().toLowerCase().indexOf(searchString.Href.toLowerCase()) !== -1;//|| data.referenceNumberDetails.toString().toLowerCase().includes(searchString.Href);
    }

    return myFilterPredicate;
  }

  addHrefFilter(){
    this.hrefFilter.valueChanges.subscribe((hrefFiltervalue) => {
      this.filteredValues['Href'] = hrefFiltervalue;
      //this.dataSource.filter = hrefFiltervalue.trim().toLowerCase();
      this.dataSource.filterPredicate = this.customFilterPredicate();
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    });

  }

ngOnInit(){
 this.addReferenceFilter();
    this.addHrefFilter();
}

Component.html


挑选
参考号
{{element.referenceNumber}
Href
{{trackingNo[0]}
追踪号码
{{trackingNo[1]}
请共享component.html或stackblitz以复制此问题我已使用模板文件@NagaSaiA更新请共享component.html或stackblitz以复制此问题我已使用模板文件@NagaSaiA更新
 <table mat-table [dataSource]="dataSource">

          <!-- Checkbox Column -->
          <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef class="select-width">Select
              <div>
                <mat-checkbox (change)="$event ? masterToggle($event) : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
                  [aria-label]="checkboxLabel()">
                </mat-checkbox>
              </div>
            </th>
            <td mat-cell *matCellDef="let row">
              <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                [aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </td>
          </ng-container>

          <!-- referenceNumber Column -->
          <ng-container matColumnDef="referenceNumber">
            <th mat-header-cell *matHeaderCellDef class="select-reference"> Reference Number
              <mat-form-field class="filter-class">
                <input matInput [formControl]="refFilter">
                <mat-icon>
                  <i class="fas fa-search"></i>
                </mat-icon>
              </mat-form-field>
            </th>
            <!-- *ngIf="findInArr(element.referenceNumberDetails) || href.length==0" -->
            <td mat-cell *matCellDef="let element"><span >{{element.referenceNumber}}</span> </td>
          </ng-container>
          <!--href-->
          <ng-container matColumnDef="Href">
            <th mat-header-cell *matHeaderCellDef class="select-tracking"> Href 
              <mat-form-field class="filter-class">
                <input matInput [formControl]="hrefFilter" [(ngModel)]="href">
                <mat-icon>
                  <i class="fas fa-search"></i>
                </mat-icon>
              </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let element">
              <div *ngFor="let trackingNo of element.referenceNumberDetails"><span *ngIf="trackingNo[0].includes(href) || href.length ==0">{{trackingNo[0]}}</span></div>
            </td>
          </ng-container>
          <!-- trackingNumbers Column -->
          <ng-container matColumnDef="trackingNumber">
            <th mat-header-cell *matHeaderCellDef class="select-tracking"> Tracking Number(s) </th>
            <td mat-cell *matCellDef="let element">
              <div *ngFor="let trackingNo of element.referenceNumberDetails"><span *ngIf="trackingNo[0].includes(href) || href.length ==0">{{trackingNo[1]}}</span></div>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns;   sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">

          </tr>
        </table>