在可重用组件中使用 *ngFor答案

【问题标题】：Using *ngFor in reusable components在可重用组件中使用 *ngFor
【发布时间】：2022-06-22 21:24:47
【问题描述】：

我可以使用 ngFor 来更改表数据源吗？在 div 中运行一个 ngFor，它会更改 tableData 源，而不是每次都明确提及应用数据表？

<div class="container">
  <app-data-table
    [tableData]="tableData1"
    [columnHeader]="columnHeader1"
  ></app-data-table>
  <app-data-table
    [tableData]="tableData2"
    [columnHeader]="columnHeader2"
  ></app-data-table>
</div>

【问题讨论】：

标签： angular angular-material angular-material2 ngfor angular-material-table

【解决方案1】：

是的，你可以。见https://stackblitz.com/edit/resuable-datatable-nz6xw9

将模板更改为以下内容：

<div class="container">
  <ng-container *ngFor="let table of config">
    <app-data-table
      [tableData]="table.data"
      [columnHeader]="table.header"
    ></app-data-table>
  </ng-container>
</div>

配置在哪里：

  config = [
    { data: this.tableData1, header: this.columnHeader1 },
    { data: this.tableData2, header: this.columnHeader2 },
  ];

【讨论】：

【解决方案2】：

当然可以。只需创建要使用的数据/标头对象数组即可。

tables = [
  {
    data: this.tableData1,
    header: this.columnHeader1
  },
  {
    data: this.tableData2,
    header: this.columnHeader2
  }
];

您可以随意调用这些对象上的字段，但描述性名称将使模板中的绑定更加清晰。

然后使用ngFor 结构指令遍历您刚刚创建的数组。将app-data-table 的[tableData] 和[columnHeader] 属性绑定到迭代对象上的字段。

<div class="container">
  <app-data-table *ngFor="let table of tables"
    [tableData]="table.data"
    [columnHeader]="table.header">
  </app-data-table>
</div>

【讨论】：