Angular可复用组件中使用*ngFor动态渲染数据表的实现方法

完全可以实现。*ngFor是Angular内置的用于重复渲染模板的结构型指令，批量渲染自定义表格组件属于其常规使用场景，无需重复编写组件标签。

具体实现 #

• 第一步：整合表格配置为统一数组
  将原本分散定义的各表格数据、表头配置，组装为一个配置数组，数组中每个元素对应一个表格需要的所有输入属性。
  组件类代码示例：

// 组件TS文件
export class BusinessComponent {
  // 原有独立的表格数据、表头定义可保留
  tableData1: any[] = [];
  columnHeader1: any[] = [];
  tableData2: any[] = [];
  columnHeader2: any[] = [];

  // 统一表格配置列表，后续新增表格直接往数组加配置即可
  tableConfigList = [
    {
      tableData: this.tableData1,
      columnHeader: this.columnHeader1
    },
    {
      tableData: this.tableData2,
      columnHeader: this.columnHeader2
    }
  ];

  // 可选：trackBy优化，避免列表变更时不必要的DOM重绘
  trackByTable(index: number) {
    // 若表格有唯一标识字段，优先返回唯一标识，渲染性能更好
    return index;
  }
}

• 第二步：改造模板为循环渲染
  删除模板中重复编写的<app-data-table>标签，改为遍历配置数组循环渲染，逐个传入输入属性。
  模板代码示例：

<div class="container">
  <app-data-table
    *ngFor="let config of tableConfigList; trackBy: trackByTable"
    [tableData]="config.tableData"
    [columnHeader]="config.columnHeader"
  ></app-data-table>
</div>

写法优势 #

• 维护成本低：新增、删除、调整表格顺序仅需修改tableConfigList数组，模板代码无需改动
• 扩展性强：后续给表格新增输入属性（如分页开关、表格标题、排序配置等），只需在配置对象中增加对应字段、模板统一绑定即可，无需逐个修改组件标签
• 逻辑复用方便：需要给所有表格增加统一的加载态、空态提示、外层样式时，仅需在循环层级加一次逻辑，所有表格自动生效

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