如何在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错误类型错误：无法读取属性＆＃39;模板＆＃39;   未定义的       at MatHeaderRowDef.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkHeaderRowDef.extractCellTemplate   （table.es5.js：280）       at table.es5.js：1452       在Function.from（）       at MatTable.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._getCellTemplates   （table.es5.js：1447）       在MatTable.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._renderRow   （table.es5.js：1395）       at table.es5.js：1289       在Array.forEach（）       在MatTable.push ../ node_modules/@angular/cdk/esm5/table.es5.js.CdkTable._forceRenderHeaderRows   （table.es5.js：1289）

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

Answer 1

为mat标题单元格添加单元格列定义matHeaderCellDef

<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

我要感谢 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>

Answer 3

这个答案对我有很大帮助。但是，我只想在'11100000'中添加您引用的列操作，该列也应包含在组件displayColumns变量中。

matColumnDef="actions"