动态Angular Material Table添加静态Actions操作列实现方案咨询

要给动态生成的Material Table加静态操作列，只需修改两处代码即可：

1. 修改TypeScript逻辑，把操作列加入展示列数组 #

在你获取动态列结构的getTablestructure方法中，动态列组装完成后，手动往displayedColumnsTemp数组末尾追加操作列的标识（此处统一用actions作为标识）：

getTablestructure(tableName) {
    this.commonservice.Get('tableStructure', tableName).subscribe((response: any) => {
      if (response) {
        this.tableColumns = response[0].data[0];
        console.log('Table Columns: ', this.tableColumns);
        this.gettableDropDownValues();
        var displayedColumnsTemp = [];
        this.tableColumns.forEach(function (column) {
          displayedColumnsTemp.push(column.columnname.toString());
        });
        // 新增：追加静态操作列，要放列最前面就换成unshift方法
        displayedColumnsTemp.push('actions');
        console.log('displayed Columns temp: ', displayedColumnsTemp)
        this.displayedColumns = displayedColumnsTemp;
        console.log('Displayed Columns: ', this.displayedColumns);
      }
    })
  }

2. 修改HTML模板，新增操作列的渲染逻辑 #

在动态列的ng-container循环结束后，单独加操作列的模板，同时修改无数据行的colspan适配列数变化：

<div class="row">
    <div class="col-md-12">
      <mat-form-field appearance="standard">
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
      </mat-form-field>
      <div class="example-container mat-elevation-z0" style="width: 100%;">
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 100%;" matSort>
          <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns; let i= index">
            <th mat-header-cell *matHeaderCellDef>{{column}}</th>
            <td mat-cell *matCellDef="let element"> {{element[column]}}</td>
          </ng-container>
          <!-- 新增：静态操作列模板 -->
          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let element">
              <!-- 这里可自行替换成你需要的操作按钮 -->
              <button mat-icon-button color="primary" (click)="editRow(element)">
                <mat-icon>edit</mat-icon>
              </button>
              <button mat-icon-button color="warn" (click)="deleteRow(element)">
                <mat-icon>delete</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      
          <tr class="mat-row" *matNoDataRow>
            <!-- 修改colspan为动态列数，适配后续列数调整 -->
            <td class="mat-cell" [colSpan]="displayedColumns.length">No data matching the filter "{{input.value}}"</td>
          </tr>
        </table>
        <mat-paginator #firstPaginator [pageSize]="6" [pageSizeOptions]="[5, 10, 25, 50, 75, 100]"
          aria-label="Select page of users" showFirstLastButtons="">
        </mat-paginator>
      </div>
    </div>
  </div>

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