在可重用組件中使用 *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 },
  ];