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();
}
组件.html
<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>
解决方案
推荐阅读
- jquery - jquery函数不适用于触发位置:粘性
- google-chrome - 浏览器证书验证
- python - Django AttributeError:模块'cal.views'没有属性'index'
- amazon-web-services - AWS 负载均衡器出口规则混乱
- python - 在 Python 中丢失 Group By 列
- javascript - 如何在不使用输入到 Papa 解析函数的情况下在本地传递文件
- c++ - 如何在没有 Cygwin 或 Visual Studio 的情况下编译 Magick++?
- html - 我尝试葡萄网站时只能看到十个项目,但总共是 40
- apache-spark - Spark Scala:访问数组内部的结构内的数据
- python-3.x - 如何转换 DataFrame 列中的货币值?