我正在使用Angular 4与角材料一起构造表。我希望在以下模板上有条件添加mat-sort-header
。
<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
我尝试了以下代码:
<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell>
,但它仍然在此列中添加了表格中的排序标头。
我的整体表看起来如下,而且工作正常,除了排序标头问题:
<mat-table #table1 [dataSource]="records" matSort class="mat-cell">
<ng-container *ngFor="let column of keys" [matColumnDef]="column">
<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : false ">
<p *ngIf=" column!='actions' ">{{ column }}</p>
<button *ngIf=" column=='actions' " mat-icon-button color="primary" (click)="functionA()">
<mat-icon class="indigo-icon" aria-label="Example icon-button with a heart icon">add</mat-icon>
</button>
</mat-header-cell>
<mat-cell *matCellDef="let row; let i=index;">
<p *ngIf=" column!='actions' ">{{ row[column] }}</p>
<button *ngIf=" column=='actions' " mat-icon-button color="accent" (click)="functionA()">
<mat-icon class="indigo-icon" aria-label="Edit">edit</mat-icon>
</button>
<button *ngIf=" column=='actions' " mat-icon-button color="accent" (click)="functionA()">
<mat-icon class="indigo-icon" aria-label="Delete">delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="keys"></mat-header-row>
<mat-row *matRowDef="let row; columns: keys;"></mat-row>
</mat-table>
好吧,我解决了如下:
<mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='actions' ? column : null " [disabled]=" column=='actions' ? true : false " >
需要绑定disabled
属性。
coderx的答案是您问题的最佳方法。但是,可能会有一个情况,您需要根据条件呈现单独的模板。在这种情况下,您可以像以下那样做:
<ng-container *ngIf="columnAction=='sort'; else noSort">
<mat-header-cell *matHeaderCellDef mat-sort-header />
</ng-container>
<ng-template #noSort>
<mat-header-cell *matHeaderCellDef />
</ng-template>
它对我有效,可以禁用垫子对特定的列!
<ng-container *ngIf="tableData == 'deviceState' || tableData == 'firmwareVersion' || tableData == 'edge'; else noSort">
<th scope="col" *matHeaderCellDef matSortDisabled> {{getHeader(tableData)}} </th>
</ng-container>
<ng-template #noSort>
<th scope="col" mat-header-cell *matHeaderCellDef mat-sort-header> {{getHeader(tableData)}} </th>
</ng-template>