Angular Material Mat-Table动态生成表格问题：无法将用户自定义表头值传入displayedColumns

我看了你的代码，发现问题核心是没有把存储表头的storeValue数组和表格的displayedColumns做关联，另外还有几个小细节需要调整才能让表格正常生成。下面是具体的修改方案：

第一步：修复表头数组的同步逻辑 #

原代码里displayedColumns是固定的["one"]，完全没和用户输入的表头值关联。我们需要在点击Add按钮时，把输入的表头值（支持逗号分隔）同步到displayedColumns，同时处理重复列、空值等情况。

修改tableGeneratorForm.ts的关键代码：

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-table-generator-form",
  templateUrl: "./table-generator-form.component.html",
  styleUrls: ["./table-generator-form.component.scss"],
})
export class TableGeneratorFormComponent implements OnInit {
  form: FormGroup;
  field = this.fb.group({
    label: ['', Validators.required] // 添加必填验证，避免空提交
  });
  tabledisplay = false;
  storeValue: string[] = [];
  displayedColumns: string[] = []; // 初始化为空数组，不再用固定值
  columnsToDisplay: string[] = this.displayedColumns;
  data: any[] = [{}]; // 初始化一行空数据，避免表格无数据时报错

  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      arr: fb.array([this.storeValue]),
    });
  }

  pushValue() {
    const inputLabels = this.field.get('label').value?.trim();
    if (inputLabels) {
      // 拆分逗号分隔的输入，去掉空格，过滤空字符串
      const newLabels = inputLabels.split(',')
        .map(label => label.trim())
        .filter(label => label);
      
      // 把新表头存入storeValue（保留历史输入）
      this.storeValue.push(...newLabels);
      // 更新displayedColumns，用Set去重避免重复列
      this.displayedColumns = [...new Set([...this.displayedColumns, ...newLabels])];
      // 同步columnsToDisplay（也可以直接在HTML里用displayedColumns）
      this.columnsToDisplay = this.displayedColumns;

      // 更新数据行，确保每一行都有新表头对应的属性（空值即可）
      this.data = this.data.map(row => {
        newLabels.forEach(label => {
          if (!(label in row)) {
            row[label] = '';
          }
        });
        return row;
      });
    }
    this.field.reset();
    this.tabledisplay = true;
  }

  ngOnInit(): void {}
}

第二步：修正HTML表格的绑定逻辑 #

原HTML里有两个小问题：表格没有根据tabledisplay控制显示，还有width样式写法错误。另外可以直接用displayedColumns绑定表头行和数据行，减少冗余。

修改tableGeneratorForm.html的表格部分：

<form [formGroup]="field">
  <mat-form-field class="" appearance="outline">
    <mat-label>Label</mat-label>
    <input matInput placeholder="Use Comma to separate values" formControlName="label">
    <!-- 添加错误提示 -->
    <mat-error *ngIf="field.get('label').hasError('required')">Please enter column names</mat-error>
  </mat-form-field>
</form>
<button type="button" mat-raised-button color="primary" (click)="pushValue()" [disabled]="!field.valid">Add</button>
<button mat-button>Action</button>

<!-- 只有tabledisplay为true时才显示表格 -->
<div *ngIf="tabledisplay">
  <table mat-table [dataSource]="data" class="mat-elevation-z8" style="width: 100%;">
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

为什么这些修改能解决问题？ #

1. 原来的displayedColumns是固定值，现在会在点击Add时，把用户输入的表头值（支持批量逗号分隔）同步进去，表格就能渲染对应的表头了。
2. 处理了逗号拆分、去重、空值过滤等场景，避免无效表头。
3. 初始化了空数据行，确保Angular Material表格能正常渲染（表格需要至少一行数据才能显示表头）。
4. 添加了表单验证，避免用户空提交。

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