我想在我的"动作"列中有两个垫子按钮一个编辑和一个删除。
有我的桌子
<table mat-table
[dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let aliasesData"> {{aliasesData[column]}} </td>
</ng-container>
有列显示
columnsToDisplay = ['id', 'domain_id', 'source', 'action'];
我想在每一行的"操作"列下都有要编辑和删除的按钮。
<table mat-table [dataSource]="tableData" class="mat-elevation-z8">
<ng-container *ngFor="let col of tab.table_columns" [matColumnDef]="col.name">
<ng-container *ngIf="col.name !== 'action' ">
<th mat-header-cell *matHeaderCellDef> {{ col.title }} </th>
<td mat-cell *matCellDef="let element"> {{ element[col.name] }}</td>
</ng-container>
<ng-container *ngIf="col.name === 'action' ">
<th mat-header-cell *matHeaderCellDef> {{ col.title }} </th>
<td mat-cell *matCellDef="let element"><button>View Details</button></td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
</table>
我有一个解决方案,但它并不完美。
<table mat-table [dataSource]="dataSource"
multiTemplateDataRows class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}"
*ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef>
{{column !== 'action' ? column : ''}}
</th>
<ng-container *ngIf="column !== 'action'">
<td mat-cell *matCellDef="let aliasesData">
<span>{{aliasesData[column]}}</span>
</td>
</ng-container>
<ng-container *ngIf="column === 'action'">
<td mat-cell *matCellDef="let aliasesData">
<span>
<button>Edit</button>
<button>Delete</button>
</span>
</td>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
您可以使用 ngIf 绑定来检查列操作并仅显示其单独的按钮。
或具有 2 列显示数组
columnsToDisplay = ['id', 'domain_id', 'source'];
columnsForConfig = ['id', 'domain_id', 'source', 'action'];
并使用一个用于渲染,另一个用于底部的配置,并将操作作为 ngFor 绑定之后的单独部分。
<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef>
{{column}}
</th>
<td mat-cell *matCellDef="let aliasesData">
<span>{{aliasesData[column]}}</span>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef>
actions
</th>
<td mat-cell *matCellDef="let aliasesData">
<button>Edit</button>
<button>Delete</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsForConfig"></tr>
<tr mat-row *matRowDef="let row; columns: columnsForConfig;"></tr>
</table>