Angular中如何使用*ngFor等方法实现动态生成表格列

实现思路 #

直接通过Angular内置的*ngFor指令遍历你的列数据源生成表头和对应单元格，Angular的自动变更检测会在你往数组追加数据时自动渲染新增列，无需额外DOM操作。

步骤1：组件内定义数据和添加逻辑 #

// 列数据结构定义
interface TableColumn {
  id: number;
  label: string;
  data: number[];
}

// 组件类代码
export class YourComponent {
  // 第一组列数据源
  columnData: TableColumn[] = [
    {
      id: 49,
      label: 'Label_1',
      data: [0,4,4,3,5,1]
    },
    {
      id: 50,
      label: 'label_2',
      data: [5,0,1,5,0,0]
    }
  ];

  // 第二组行标题前缀数组
  rowHeaderPrefix = 'value_';
  // 行总数=单个列的data数组长度
  get rowCount() {
    return this.columnData[0]?.data.length || 0;
  }

  // 添加新列方法，绑定按钮点击事件
  addNewColumn() {
    // 自定义新列的参数，替换为实际业务数据即可
    const newCol: TableColumn = {
      id: Date.now(), // 保证唯一id即可
      label: `label_${this.columnData.length + 1}`,
      data: [7,8,9,2,3,4] // 新列的每行数据
    };
    this.columnData.push(newCol);
  }
}

步骤2：模板文件编写表格结构 #

<!-- 新增列按钮 -->
<button (click)="addNewColumn()">添加数据到数组</button>

<!-- 表格结构 -->
<table style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="border: 1px solid #ccc; padding: 8px;">#</th>
      <!-- 动态生成列表头 -->
      <th *ngFor="let col of columnData" style="border: 1px solid #ccc; padding: 8px;">
        {{ col.label }}
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态生成行 -->
    <tr *ngFor="let rowIdx of [].constructor(rowCount); let i = index">
      <td style="border: 1px solid #ccc; padding: 8px;">
        {{ rowHeaderPrefix }}{{ i + 1 }}
      </td>
      <!-- 动态生成每行的单元格 -->
      <td *ngFor="let col of columnData" style="border: 1px solid #ccc; padding: 8px;">
        {{ col.data[i] }}
      </td>
    </tr>
  </tbody>
</table>

补充说明 #

• 如果你的行标题不是固定前缀加序号，直接替换行标题部分的取值逻辑为你自己的行标题数组即可
• 若需要调整表格样式，直接修改对应的style或者加class即可
• 该方案完全支持动态增删列，只要修改columnData数组，表格会自动同步变更

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