我有
mat-Table
和 filters
,我想按其中一个 columns
对表格进行分组。
我想让它成为一个可折叠的行,只显示您有多少“那种”类型,您可以按它来查看该组内的每个
row
。
我将分享我的 HTML(这是一个片段,而不是整个 HTML :
<mat-checkbox class="CheckBoxClass" value="clientType" [(ngModel)]="isChecked " disabled (change)="updateFilter('LQOCH_SHM_LOEZI_QTSR', clientType)" >{{clientType}}</mat-checkbox>
<br><br>
<mat-checkbox class="CheckBoxClass" value="contSize" [(ngModel)]="isChecked" disabled (change)="updateFilter('AORKH_MCOLH', contSize)" >{{contSize}}</mat-checkbox>
<br><br>
<mat-checkbox class="CheckBoxClass" value="storageType" [(ngModel)]="isChecked" disabled (change)="updateFilter('TAOR_QTSR_EBRI', storageType)" >{{storageType}}</mat-checkbox>
</div>
<!-- Container Table -->
<div>
<mat-table [dataSource]="dataSource" [hidden]="!show" >
<!-- 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 > Container Type</mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}}</mat-cell>
这是我的组件
NgOnInit
:
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
//Data
this.dataSource = new MatTableDataSource(result);
//Paginator
this.dataSource.paginator = this.paginator;
this.dataSource.filterPredicate = ((data: Container, filter: string): boolean => {
const filterValues = JSON.parse(filter);
let conditions = true;
for (let filterKey in filterValues) {
if (filterKey === 'SOG_MCOLH' || filterKey === 'LQOCH_SHM_LOEZI_QTSR' || filterKey === 'AORKH_MCOLH' || filterKey === 'TAOR_QTSR_EBRI') {
conditions = conditions && data[filterKey].trim().toLowerCase().indexOf(filterValues[filterKey]) !== -1;
}
else if (filterValues[filterKey].length) {
conditions = conditions && filterValues[filterKey].includes(data[filterKey].trim().toLowerCase());
}
}
return conditions;
});
}
)}
基本上我想要实现的是折叠并显示它有多少行的行,您可以按它来打开行。
这不是开箱即用的有角材质。有一些解决方案可以自己解决。 这是另一篇提供一些指导的 SO 帖子:Angular Material mat-table Row Grouping
那里提供的第二个 StackBlitz 链接给出了使用分组行的表格的一个很好的示例。
如果您的项目允许,您还可以查看默认包含行分组的其他库。
您可以使用
multiTemplateDataRows
中的mat-table
来实现行分组和可折叠/可展开列。
这是 Stackblitz 的工作示例:mat-table-with-row-grouping-and-expandable-rows