每一行和标题列的“编辑/删除”按钮是 md-table 组件中的“操作”

Posted 2023-02-22

【中文标题】每一行和标题列的“编辑/删除”按钮是 md-table 组件中的“操作”

【英文标题】："Edit / Delete" button for each row & header column is 'Action' in the md-table component

【发布时间】：2017-12-24 07:59:04

【问题描述】：

我在 Angular 4 世界中很新，我正在尝试在 Angular 4 的 Angular Material design 中的 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>

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【参考方案3】：

对于那些寻找 6 及以上的人

在您的 .ts 中

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

在你的 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>

【参考方案4】：

你在正确的轨道上，你只需要在displayedColumns列表中添加一个actions项目；

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> 

【讨论】：

这个答案对我有帮助。我已经这样做了...... Action ​​eader-cell> 编辑

我需要实现与操作按钮相同的功能，但我的材质表位于自定义组件中，我无法弄清楚是否应该将操作按钮 html 添加到通用自定义组件中，由于所有页面都需要不同的操作按钮，因此我们将不胜感激。

那么如何将该行数据传递给该按钮单击事件？该行的所有数据，例如“用户名，电子邮件...”？！ (click)="buttonClicked(填写这个)"