在可重用组件中使用 *ngFor

Question

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

这是stackbiltz

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

Answer 1

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

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>

Answer 2

是的你可以。 见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 },
  ];