我在 angular 4 世界中很新,我正在尝试为每一行添加"编辑/删除"按钮,标题列是 Angular 4 中 Angular Material 设计中 md-table 组件中的"操作"。 我该怎么做? 为每行自定义标题列和按钮。 是否有可用于执行此操作的模板? 下面是我的 HTML 代码。
用户信息.html
<!-- ID Column -->
<ng-container cdkColumnDef="username">
<md-header-cell *cdkHeaderCellDef> User Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.username}} </md-cell>
</ng-container>
<!-- Email Column -->
<ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef> Email </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
</ng-container>
<!-- First Name Column -->
<ng-container cdkColumnDef="userFirstName">
<md-header-cell *cdkHeaderCellDef> First Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.userFirstName}} </md-cell>
</ng-container>
<!-- Last Name Column -->
<ng-container cdkColumnDef="userLastName">
<md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.userLastName}} </md-cell>
</ng-container>
<!-- Phone Column -->
<ng-container cdkColumnDef="userMobile">
<md-header-cell *cdkHeaderCellDef> Phone </md-header-cell>
<md-cell *cdkCellDef="let row" > {{row.userMobile}} </md-cell>
</ng-container>
<!-- Role Column -->
<ng-container cdkColumnDef="authority">
<md-header-cell > Role </md-header-cell>
<md-cell *cdkCellDef="let row" > {{row.authority}} </md-cell>
</ng-container>
<!-- Action Column
<md-header-cell > Action </md-header-cell>
<md-cell > <button md-raised-button >Edit</button> </md-cell> -->
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
您走在正确的轨道上,您只需要将actions
项添加到displayedColumns
列表中:
displayedColumns = ["username", "email", "userFirstName" ... , "actions"];
和:
<ng-container cdkColumnDef="actions">
<md-header-cell > Actions </md-header-cell>
<md-cell *cdkCellDef="let row" >
<button md-raised-button >Edit</button>
</md-cell>
</ng-container>
对于那些寻找6岁及以上的人
在您的 .ts 中
displayColumns = ["用户名","电子邮件","用户名字" ... ,"操作"];
并在您的 HTML 中
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element">
<button mat-raised-button >Edit</button>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary">
<mat-icon aria-label="Edit">edit</mat-icon>
</button>
<button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</mat-cell>
</ng-container>
.ts 文件代码:
export interface tableColumns
{
username:string,
email:string,
userFirstName:string,
...,
actions: string
}
displayedColumns: string[] = [ 'username','email','userFirstName', ... ,'actions'];
dataSource: MatTableDataSource; // for table dataSource
HTML文件代码:
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header> User Name </th>
<td mat-cell *matCellDef="let row"> {{row.username}} </td>
</ng-container>
<!-- Email Column -->
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
<td mat-cell *matCellDef="let row"> {{row.email}} </td>
</ng-container>
<!-- First Name Column -->
<ng-container matColumnDef="userFirstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
<td mat-cell *matCellDef="let row"> {{row.userFirstName}} </td>
</ng-container>
<!-- Last Name Column -->
<ng-container matColumnDef="userLastName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
<td mat-cell *matCellDef="let row"> {{row.userLastName}} </td>
</ng-container>
<!-- Phone Column -->
<ng-container matColumnDef="userMobile">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Phone </th>
<td mat-cell *matCellDef="let row"> {{row.userMobile}} </td>
</ng-container>
<!-- Role Column -->
<ng-container matColumnDef="authority">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Role </th>
<td mat-cell *matCellDef="let row"> {{row.authority}} </td>
</ng-container>
<!-- Action Column-->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let row"><button mat-raised-button color="primary">Edit</button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>