问题描述
我有一个要求，其中显示一个页面中跨多个选项卡的单个数据。我希望允许用户对任何选项卡进行过滤和排序。我已经能够进行过滤，但到目前为止，我只能一次在一个选项卡上进行排序。有没有办法在多个选项卡上进行一种排序工作。我包含了一些简短的片段，展示了我正在尝试做的事情。
.ts 文件
export class NcsatsHomeComponent implements OnInit {
dataSource = new MatTableDataSource<any>([]);
dataSource2 = new MatTableDataSource<any>([]);
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
displayedColumns: string[] = ['CauseEffect','nonconSys','nonconRec','partNumber','partName']
displayedColumns1: string[] = ['CauseEffect1','nonconSys1','nonconRec1','partNumber1','partName1']
displayedColumns2: string[] = ['CauseEffect','discrepancyShort','dispositionShort']
displayedColumns3: string[] = ['CauseEffect1','discrepancyShort1','dispositionShort1']
ngOnInit(): void {
this.getData();
}
getData(){
this.loggedIn = this.authenticationService.loginNeeded();
console.log('login check',this.loggedIn);
if(this.loggedIn){
this.isLoading = true
this.isempty = false;
setTimeout(() => {
this.repoService.getEntries(0,1000).subscribe(largeDataSet => {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.dataSource.data = largeDataSet;
this.dataSource.data.forEach(element => {Object.keys(element).forEach(k => element[k] = element[k] === null ? '' : element[k])});
console.log(this.dataSource.data);
this.dataSource2.data = this.dataSource.data;
this.isLoading = false;
this.runAllChanges();
})
})
} else {
this.router.navigateByUrl('/');
}
}
}
.html 文件
<mat-tab-group mat-align-tabs="center" [selectedindex]="mytab">
<!-- <table mat-table [dataSource]="dataSource" matSort> -->
<mat-tab label="Part Identification" >
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="CauseEffect">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 180px;padding-right: 15px;"> Cause/Effect </th>
<td mat-cell *matCellDef="let row"> {{row.nonconSys}}{{row.nonconRec}}{{row.tagRev}}{{row.status}} </td>
</ng-container>
<ng-container matColumnDef="nonconSys">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60px;padding-right: 15px;"> System </th>
<td mat-cell *matCellDef="let row"> {{row.nonconSys}} </td>
</ng-container>
<ng-container matColumnDef="nonconRec">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 100px;padding-right: 15px;"> Noncon Rec </th>
<td mat-cell *matCellDef="let row"> {{row.nonconRec}} </td>
</ng-container>
<ng-container matColumnDef="partNumber">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 150px;padding-right: 15px;"> Primary P/N </th>
<td mat-cell *matCellDef="let row">
<div *ngIf = "!selection.isSelected(row)">
{{row.partNumber}}
</div>
<div *ngIf = "selection.isSelected(row)">
<mat-form-field style="width: 150px;">
<input type="text" matInput #input [value]="row.partNumber" [(ngModel)]="row.partNumber" (input)="sendUpdateInfo(row)"
(ngModelChange)="row.partNumber = $event.toupperCase()">
</mat-form-field>
</div>
</td>
</ng-container>
<ng-container matColumnDef="partName">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 200px;padding-right: 15px;"> Primary Part Name </th>
<td mat-cell *matCellDef="let row">
<div *ngIf = "!selection.isSelected(row)">
{{row.partName}}
</div>
<div *ngIf = "selection.isSelected(row)" >
<mat-form-field style="width: 200px">
<input type="text" matInput #input [value]="row.partName" [(ngModel)]="row.partName" (input)="sendUpdateInfo(row)"
(ngModelChange)="row.partName = $event.toupperCase()">
</mat-form-field>
</div>
</td>
</ng-container>
<ng-container matColumnDef="CauseEffect1">
<th mat-header-cell *matHeaderCellDef style="width: 180px;padding-right: 15px;">
</th>
</ng-container>
<ng-container matColumnDef="nonconSys1">
<th mat-header-cell *matHeaderCellDef style="width: 60px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 60px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="nonconSysFilterFunc()" [(ngModel)]="nonconSysFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
<ng-container matColumnDef="nonconRec1">
<th mat-header-cell *matHeaderCellDef style="width: 100px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 100px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="nonconRecFilterFunc()" [(ngModel)]="nonconRecFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
<ng-container matColumnDef="partNumber1">
<th mat-header-cell *matHeaderCellDef style="width: 150px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 150px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="partNumberFilterFunc()" [(ngModel)]="partNumberFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
<ng-container matColumnDef="partName1">
<th mat-header-cell *matHeaderCellDef style="width: 200px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 200px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="partNameFilterFunc()" [(ngModel)]="partNameFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
</table>
</mat-tab>
<mat-tab label="discrepancy" >
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="CauseEffect">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 180px;padding-right: 15px;"> Cause/Effect </th>
<td mat-cell *matCellDef="let row"> {{row.nonconSys}}{{row.nonconRec}}{{row.tagRev}}{{row.status}} </td>
</ng-container>
<ng-container matColumnDef="nonconSys">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60px;padding-right: 15px;"> System </th>
<td mat-cell *matCellDef="let row"> {{row.nonconSys}} </td>
</ng-container>
<ng-container matColumnDef="nonconRec">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 100px;padding-right: 15px;"> Noncon Rec </th>
<td mat-cell *matCellDef="let row"> {{row.nonconRec}} </td>
</ng-container>
<ng-container matColumnDef="discrepancyShort">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 260px;padding-right: 15px;"> discrepancy </th>
<td mat-cell *matCellDef="let row"> {{row.discrepancyShort}} </td>
</ng-container>
<ng-container matColumnDef="dispositionShort">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 260px;padding-right: 15px;"> disposition </th>
<td mat-cell *matCellDef="let row"> {{row.dispositionShort}} </td>
</ng-container>
<ng-container matColumnDef="CauseEffect1">
<th mat-header-cell *matHeaderCellDef style="width: 180px;padding-right: 15px;">
</th>
</ng-container>
<ng-container matColumnDef="nonconSys1">
<th mat-header-cell *matHeaderCellDef style="width: 60px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 60px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="nonconSysFilterFunc()" [(ngModel)]="nonconSysFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
<ng-container matColumnDef="nonconRec1">
<th mat-header-cell *matHeaderCellDef style="width: 100px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 100px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="nonconRecFilterFunc()" [(ngModel)]="nonconRecFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
<ng-container matColumnDef="discrepancyShort1">
<th mat-header-cell *matHeaderCellDef style="width: 260px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 260px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="discrepancyShortFilterFunc()" [(ngModel)]="discrepancyShortFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
<ng-container matColumnDef="dispositionShort1">
<th mat-header-cell *matHeaderCellDef style="width: 260px;padding-right: 15px;">
<mat-form-field class="filter" floatLabel="never" style="width: 260px;">
<mat-label>Filter</mat-label>
<input matInput (keyup)="dispositionShortFilterFunc()" [(ngModel)]="dispositionShortFilter" [disabled]="isLoading">
</mat-form-field>
</th>
</ng-container>
</table>
</mat-tab>
</mat-tab-group>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）