Angular &引用；编辑/删除"；每行的按钮&；标题列为'；行动'；在md表组件中

我是angular 4的新手，我正在尝试为每个行添加“Edit/Delete”按钮，标题栏是angular 4的angular Material design中md表格组件中的“Action”。我该怎么做？为每行自定义标题列和按钮。有任何模板可用于此操作吗？下面是我的HTML代码

userinfo.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>

用户名
{{row.username}
电子邮件
{{row.email}
名字
{{row.userFirstName}
姓
{{row.userLastName}}
电话
{{row.userMobile}}
角色
{{row.authority}}

您走对了方向，只需在

displayedColumns

列表中添加一个

actions

项

displayedColumns = ["username","email","userFirstName" ...  ,"actions"];

以及：

行动
编辑

适用于寻找6岁及以上学历的人

在你的

displayedColumns = ["username","email","userFirstName" ... ,"actions"]; displayedColumns=[“用户名”、“电子邮件”、“用户名”…“操作”]； 在你的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>

行动
编辑

行动
编辑
删除

.ts文件代码：

导出接口表列
{ 
用户名：string，
电子邮件：string，
userFirstName:string，
..., 
操作：字符串
} 
displayedColumns:string[]=['username'、'email'、'userFirstName'、…、'actions']；
数据源：MatTableDataSource；//对于表数据源

HTML文件代码：

用户名
{{row.username}
电子邮件
{{row.email}
名字
{{row.userFirstName}
姓
{{row.userLastName}}
电话
{{row.userMobile}}
角色
{{row.authority}}
行动
编辑

这个答案对我很有帮助。我是这样做的。。。。动作编辑我需要实现与动作按钮相同的功能，但我的材质表位于自定义组件中，我无法确定应如何将动作按钮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>