我有一个角度7的Mat-Data-Table，用于显示从API获取的数据。
我想使用从客户端获取的3个参数，并使用快照将它们保存到值中。
我现在面临的问题是如何做到这一点，以便可以通过NgOninit中客户端的选择来过滤表。
这是我的组件：
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[]>([]);
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(',');
});
});
}
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));
}
}
}
这是我的HTML：
<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>
<!--Row Maker-->
<mat-header-row *matHeaderRowDef="tableColumn"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumn;" ></mat-row>
</mat-table>
</div>
我尝试使用管道，但是我不太了解。
答案 0 :(得分：0)
您说过要从snapshot读取三个值，但是您的代码示例显示了两个。还不清楚从snapshot读取的数据与过滤器之间的关系。
我假设您存储的两个字段是要过滤的字段。
本质上，您会为dataSource.filter分配一个初始值，因为BehaviourSubject不会发出任何内容。
...
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
...
// get snapshot data
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);
...
this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
this.dataSource.filter = newFilterValue.join(',');
});
// set the filter to the dataSource
this.dataSource.filter = ` ${this.clientType},${this.storageType}`;
// Make changes to UI to reflect the filter
// ....
});
}
您也可以在next()内的BehaviourSubject上调用ngOnInit来设置过滤器
...
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
...
// get snapshot data
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);
...
this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
this.dataSource.filter = newFilterValue.join(',');
});
// set the filter via the filterCheckbox
this.filterCheckboxes.next([this.clientType, this.storageType]);
// Make changes to UI to reflect the filter
// ....
});
}