如何在Angular mat-table中添加按钮？运行报错求助

问题根源 #

报错原因是重复定义了matColumnDef="actions"：

• 你在displayedColumns数组中加入actions后，原代码里的*ngFor="let column of displayedColumns"会自动遍历所有列，包括actions，并为其生成一个带matColumnDef="actions"的<ng-container>。
• 同时你又手动新增了一个同名的<ng-container matColumnDef="actions">，Angular Material检测到重复的列定义，因此抛出错误。

解决方案（二选一即可） #

方案1：排除Actions列自动生成

修改原循环逻辑，把actions从自动生成的列中排除，保留手动编写的Actions列容器：

<table mat-table [dataSource]="UserDataSourceFilters" class="mat-elevation-z1 mt-5">
    <!-- 只生成非actions的列 -->
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns.filter(col => col !== 'actions')">
        <th mat-header-cell *matHeaderCellDef>{{ getUserColumnDisplayName(column) }}</th>
        <td mat-cell *matCellDef="let emp">{{ emp[column] }}</td>
    </ng-container>

    <!-- 手动定义Actions列 -->
    <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>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let emprow; columns: displayedColumns" (click)="onRowExchangeClicked(emprow)"
        [ngClass]="{ 'clicked-row': true  }"></tr>
</table>

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100, 200]"
    aria-label="Select page">
</mat-paginator>

方案2：在循环内处理Actions列

无需单独编写Actions列容器，直接在循环的单元格内判断列名，渲染按钮或字段值：

<table mat-table [dataSource]="UserDataSourceFilters" class="mat-elevation-z1 mt-5">
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef>
            {{ column === 'actions' ? 'actions' : getUserColumnDisplayName(column) }}
        </th>
        <td mat-cell *matCellDef="let emp">
            <!-- 判断是否为actions列，渲染按钮或字段值 -->
            <ng-container *ngIf="column === 'actions'; else displayField">
                <button mat-button>Edit</button>
            </ng-container>
            <ng-template #displayField>
                {{ emp[column] }}
            </ng-template>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let emprow; columns: displayedColumns" (click)="onRowExchangeClicked(emprow)"
        [ngClass]="{ 'clicked-row': true  }"></tr>
</table>

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100, 200]"
    aria-label="Select page">
</mat-paginator>

额外检查点 #

若修改后仍报错，确认以下内容：

• 已在模块中导入MatButtonModule（因使用了mat-button）：

  import { MatButtonModule } from '@angular/material/button';
  
  @NgModule({
    imports: [
      // ...其他导入
      MatButtonModule
    ]
  })
  export class YourModule { }
  

• getUserColumnDisplayName函数对actions列做了兼容处理，比如：

  getUserColumnDisplayName(column: string): string {
    if (column === 'actions') return '操作'; // 或直接返回'actions'
    // 原有字段映射逻辑
  }
  

内容的提问来源于stack exchange，提问作者Joubba