如何在不破坏现有结构的前提下为Angular mat-table添加额外列？

核心错误原因 #

• 变量名拼写不一致：循环列使用的变量是columnsToDisplay，但表头、行定义中错误写为columnsToDisplays（多了末尾的s），导致列渲染匹配异常
• 列定义嵌套错误：Angular Material Table要求所有matColumnDef定义必须是<table>标签的直接子元素，你错误将按钮列的matColumnDef嵌套在了展开行的单元格内部，还重复定义了expandedDetail的列标识，直接破坏了表格DOM结构
• 新增的status、buttons列没有独立的顶层列定义

修复步骤 #

1. 统一变量名：将所有columnsToDisplays修改为columnsToDisplay，保证列配置的读写逻辑一致
2. 删除嵌套在expandedDetail内部的重复matColumnDef代码块，该代码块属于无效的列定义
3. 在循环列的ng-container之后、expandedDetail列定义之前，新增status和buttons的独立列定义：

<!-- 新增status状态列 -->
<ng-container matColumnDef="status">
  <th mat-header-cell *matHeaderCellDef> 状态 </th>
  <td mat-cell *matCellDef="let element"> {{element.status}} </td>
</ng-container>

<!-- 新增buttons按钮列 -->
<ng-container matColumnDef="buttons">
  <th mat-header-cell *matHeaderCellDef> 操作 </th>
  <td mat-cell *matCellDef="let element">
    <button mat-raised-button > 接受 </button>
    <button mat-raised-button > 拒绝 </button>
  </td>
</ng-container>

4. 确认columnsToDisplay数组中已经按展示顺序添加了'status'和'buttons'两个字段，示例配置如下：

columnsToDisplay: string[] = ['position', 'name', 'weight', 'symbol', 'status', 'buttons'];

5. 如果需要将按钮放在展开详情区域，直接把按钮代码写入expandedDetail的内部容器即可，不需要套matColumnDef相关标签。

修复后完整代码示例 #

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <!-- 新增status状态列 -->
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> 状态 </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>

  <!-- 新增buttons按钮列 -->
  <ng-container matColumnDef="buttons">
    <th mat-header-cell *matHeaderCellDef> 操作 </th>
    <td mat-cell *matCellDef="let element">
      <button mat-raised-button > Accept </button>
      <button mat-raised-button > Reject </button>
    </td>
  </ng-container>

  <!-- 展开行列定义 -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="example-element-diagram">
          <div class="example-element-position"> {{element.position}} </div>
          <div class="example-element-symbol"> {{element.symbol}} </div>
          <div class="example-element-name"> {{element.name}} </div>
          <div class="example-element-weight"> {{element.weight}} </div>
        </div>
        
        <div class="example-element-description">
          {{element.description}}
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

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