Angular Material - 如何在 table 的每一行添加一个按钮？

Question

我想在 table 的每一行显示一个按钮。

来自 .html 组件的代码

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th id="head" mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
        <td mat-cell *matCellDef="let element" class="action-link"><a>See details</a></td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

来自 .ts 组件的代码

export class LoginComponent implements OnInit {

     displayedColumns: string[] = ['idItem', 'nameItem', 'options'];
     columnsToDisplay: string[] = this.displayedColumns.slice();

     itemList: Items[] = [];
     dataSource = [];

     constructor(private itemService: ItemsService) { }

     ngOnInit(): void {
          this.itemList = [];
          this.itemService.list().subscribe(data => {
          data.forEach(element => {
              this.itemList.push({idItem: element.idItem, nameItem: element.nameItem});
          });
          this.dataSource = this.itemList;
      });
   }
}

table 的数据是从 returns 一个列表的服务中获取的，在 table 的每一行我想放一个按钮来获取每行中的项目。我一直在查看如何执行此操作，但该按钮未显示在 table.

中

Answer 1

您需要 <ng-container> 元素来检查当前列值是否为 'options' 或 *ngIf。如果没有，它将使用 <ng-template #optionsTemplate>.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th id="head" mat-header-cell *matHeaderCellDef>{{ column }}</th>

    <ng-container *ngIf="column != 'options'; else optionsTemplate">
      <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
    </ng-container>

    <ng-template #optionsTemplate>
      <td mat-cell *matCellDef="let element" class="action-link">
        <a>See details</a>
      </td>
    </ng-template>
  </ng-container>

  ...
</table>

Sample Solution on StackBlitz

注：

根据Define the column templates，每个列定义应该只有单个mat-header-cell和mat-cell元素.

Each column definition should be given a unique name and contain the content for its header and row cells.

Angular Material - 如何在 table 的每一行添加一个按钮？

Angular Material - How to add a button on each row of a table?

arrays

angular

typescript

angular-material

angular-material-table