我有一个有效的复选框过滤器。但是当我尝试制作另一组过滤器时，它不允许这样做。 第二个过滤器什么也不做。 我在两个过滤器中都使用了谓词，因为没有可用于复选框的过滤器。
这是我的组件：
export class ContainersPageComponent implements OnInit {
tableColumn = ['AITOR','SOG_MCOLH','GOBH_MCOLH','AORKH_MCOLH','MCOLH_N7','MCOLH_AAAA', 'TAOR_QTSR_EBRI','QOD_MCHSN','STTOS_RASHI_4_1',
'LQOCH_SHM_MQOTSR_EBRI','LQOCH_SHM_LOEZI_QTSR','LQOCH_QOD_LQOCH'];
p :number = 1;
dataSource : any = new MatTableDataSource;
public show:boolean = false;
public tableHide:any = 'Show';
searchText: string = "";
autoFilter : any;
clientType : string;
storageType: any;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
filterCheckboxes: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
filterParamasBoxes : BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
constructor(private marinService:MarinServiceService,private route: ActivatedRoute) { }
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
//Data
this.dataSource = new MatTableDataSource(result);
//Paginator
this.dataSource.paginator = this.paginator;
//AutoFilter Form 1st page
this.clientType = this.route.snapshot.queryParamMap.get('clientType');
this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
console.log('The Client name is : '+this.clientType+' '+'The storage Facility is : '+this.storageType);
//CheckBox Filter
this.dataSource.filterPredicate = (data: Container, filter: any) => {
return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
};
this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
this.dataSource.filter = newFilterValue.join(',');
});
});
this.dataSource.filterPredicate = (data : Container,filterParam : any) => {
return filterParam.split(',').every((paramItem: any) => data.LQOCH_SHM_LOEZI_QTSR.indexOf(paramItem) !== -1);
};
this.filterParamasBoxes.subscribe((paramFilterValue: any[]) => {
this.dataSource.filterParam = paramFilterValue.join(',');
})
}
toggle(){
this.show = !this.show;
if(this.show) {
this.tableHide = "Hide";
} else {
this.tableHide = "Show";
}
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
public getRowsValue(flag) {
if (flag === null) {
return this.dataSource.length;
} else {
return this.dataSource.filter(i => (i.state == flag)).length;
}
}
addFilter(change: MatCheckboxChange) {
if (this.filterCheckboxes.value.some((a: any) => a === change.source.value)) {
this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: any) => a !== change.source.value));
} else {
this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
}
}
paramFilter(changeParam: MatCheckboxChange){
if (this.filterParamasBoxes.value.some((a: any) => a === changeParam.source.value)) {
this.filterParamasBoxes.next(this.filterParamasBoxes.value.filter((a: any) => a !== changeParam.source.value));
} else {
this.filterParamasBoxes.next(this.filterParamasBoxes.value.concat(changeParam.source.value));
}
}
这是我的HTML：
<mat-checkbox class="CheckBoxClass" value="MRR" (change)="paramFilter($event)">MRR</mat-checkbox>
<div>
<mat-table [dataSource]="dataSource" [hidden]="!show" matSort >
<!-- Location -->
<ng-container matColumnDef="AITOR">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
</ng-container>
<!-- Type -->
<ng-container matColumnDef="SOG_MCOLH">
<mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
</ng-container>
<!-- Height -->
<ng-container matColumnDef="GOBH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Height </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.GOBH_MCOLH}} </mat-cell>
</ng-container>
<!-- Length -->
<ng-container matColumnDef="AORKH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Lenght </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AORKH_MCOLH}} </mat-cell>
</ng-container>
<!-- Number -->
<ng-container matColumnDef="MCOLH_N7">
<mat-header-cell *matHeaderCellDef> Container Number </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_N7}} </mat-cell>
</ng-container>
<!-- Name AAAA -->
<ng-container matColumnDef="MCOLH_AAAA">
<mat-header-cell *matHeaderCellDef > Container Name </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_AAAA}} </mat-cell>
</ng-container>
<!-- QTSR Hebrow -->
<ng-container matColumnDef="TAOR_QTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Storage Site </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.TAOR_QTSR_EBRI}} </mat-cell>
</ng-container>
<!-- Storage Code -->
<ng-container matColumnDef="QOD_MCHSN">
<mat-header-cell *matHeaderCellDef> Storage Code </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.QOD_MCHSN}} </mat-cell>
</ng-container>
<!-- Status -->
<ng-container matColumnDef="STTOS_RASHI_4_1">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.STTOS_RASHI_4_1}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_MQOTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Customer MQOTSR </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_MQOTSR_EBRI}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_LOEZI_QTSR">
<mat-header-cell *matHeaderCellDef> ESN </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_LOEZI_QTSR}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_QOD_LQOCH">
<mat-header-cell *matHeaderCellDef> Code Customer </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_QOD_LQOCH}} </mat-cell>
</ng-container>
添加了堆叠闪电战link-https://stackblitz.com/edit/marin-project-stackblitz
请注意，您不会将任何数据视为其内部API服务。
我尝试更改值，但似乎没有任何效果。
我尝试将过滤器移至NgOnInit
答案 0 :(得分：0)
您的代码中存在一些逻辑错误。在尝试将过滤器添加到filterPredicate()的地方，您改写了最初定义的filterPredicate()。因此您的代码只能通过LQOCH_SHM_LOEZI_QTSR进行过滤，而不能通过SOG_MCOLH进行过滤。
您可以使用ngModel或formControlName绑定到复选框的值，并在更改复选框时调用applyFilter()函数。我将过滤器作为对象传递，因为它更易于使用。尽管mat-table仅接受它作为字符串，所以您将需要使用JSON.stringify()。
我在StackBlitz上附了一个工作示例。