如何在Angular mat-table中放置按钮？

Question

我已成功使用Angular mat-table来显示数据库中的数据:

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>

<mat-table #table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="iccid">
    <mat-header-cell *matHeaderCellDef mat-sort-header> ICCID </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.iccid}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="euicc">
    <mat-header-cell *matHeaderCellDef mat-sort-header> EUICC </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.euicc}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="msisdn">
    <mat-header-cell *matHeaderCellDef mat-sort-header> MSISDN </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.msisdn}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="status_paket_data">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Status paket data </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.status_paket_data}}  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="status_sms">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Status SMS </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.status_sms}}  </mat-cell>
  </ng-container>

<ng-container matColumnDef="active_profile">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Active profile </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.active_profile}}  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click) = "rowClicked(row)" ></mat-row>
</mat-table>

<mat-paginator [length]="5" [pageSize]="3" [pageSizeOptions]="[5, 10, 25]">
</mat-paginator>

现在我想添加另一个包含按钮的列.所以在app.component.ts中,我添加了一个名为actions的新列:

 displayedColumns = ['iccid', 'euicc', 'msisdn', 'status_paket_data', 'status_sms', 'active_profile', 'actions'];

在app.component.html中,我在displayedColumns之前添加:

<ng-container matColumnDef="actions">
  <mat-header-cell > Actions </mat-header-cell>
  <mat-cell *matCellDef="let row" >
       <button mat-button >Edit</button>
  </mat-cell>
</ng-container>

当页面刷新时,我得到这个:

AppComponent.html:5错误类型错误:无法在MatHeaderRowDef.push读取未定义的属性"模板"../ node_modules/@angular/cdk/esm5/table.es5.js.CdkHeaderRowDef.extractCellTemplate(table.es5.js:280) at table.es5.js:1452在MatTable的MatTable.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._getCellTemplates(table.es5.js:1447)的Function.from()处.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._renderRow(table.es5.js:1395)at table.es5.js:1289 at at Mattable.push的Array.forEach() ../node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._forceRenderHeaderRows(table.es5.js:1289)

如何正确添加带有按钮的列？

Answer 1

添加matHeaderCellDefmat标头单元格的单元格列定义

<ng-container matColumnDef="actions">
  <mat-header-cell  *matHeaderCellDef > Actions </mat-header-cell>
  <mat-cell *matCellDef="let row" >
       <button mat-button >Edit</button>
  </mat-cell>
</ng-container>

Answer 2

这个答案对我帮助很大。但是，我只想在matColumnDef="actions"您引用的列actions 中添加它 ，它也应该包含在组件 displayColumns 变量中。

displayedColumns = ['id','name','price'...etc., 'actions']

Answer 3

我要感谢 Sachila Ranawaka 的回答。对于那些使用 Material 11+ 的人，我只建议添加th和td元素，因为它们会呈现更好看的结果（边框、填充、高度等）。

<ng-container matColumnDef="actions">
  <th mat-header-cell  *matHeaderCellDef > Actions </th>
  <td mat-cell *matCellDef="let row" >
    <button mat-button >Edit</button>
  </td>
</ng-container>