使用条件在 mat-table 中添加列

Question

I need to construct a table following these requirements:

• At least have 4 columns: ClientId || Foo_Type || Foo 1 || Foo 2
• If more than three "Foo" in Foo_Chain, the table needs to grow like the following example
• ClientId || Foo_Type || Foo 1 || Foo 2 || Foo 3 || Foo 4

[
   {
      "clientId":"44",
      "Foo_Type":"XYZ",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"XYZ 1"
         },
         {
            "Imported":true,
            "Foo":"XYZ 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"ABC",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"ABC 1"
         },
         {
            "Imported":true,
            "Foo":"ABC 2"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"ASR",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"ASR 1"
         },
         {
            "Imported":true,
            "Foo":"ASR 2"
         },
         {
            "Imported":true,
            "Foo":"ASR 3"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"LOP",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"LOP 1"
         },
         {
            "Imported":true,
            "Foo":"LOP 2"
         },
         {
            "Imported":true,
            "Foo":"LOP 3"
         },
         {
            "Imported":true,
            "Foo":"LOP 4"
         }
      ]
   }
]

I have this HTML, but the mat table is static, and I don't know how to proceed to make this start growing if needed

<table mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="clientId">
            <th mat-header-cell *matHeaderCellDef> {{'ClientId' | uppercase}} </th>
            <td mat-cell *matCellDef="let element" class="data-column">
              {{element.clientID}}
            </td>
          </ng-container>
          <ng-container matColumnDef="footype">
            <th mat-header-cell *matHeaderCellDef> {{'Foo_Type' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
                {{element.foo_Type}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="footype1">
            <th mat-header-cell *matHeaderCellDef> {{'FooType1' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{elemente.FooChain[0].Foo}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="footype2">
            <th mat-header-cell *matHeaderCellDef> {{'FooType2' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{elemente.FooChain[1].Foo}}
              </td>
            </div>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Answer 1

 export class TableDynamicColumnsExample {
      displayedColumns: string[] = ['client', 'foo_type'];
      columnsToDisplay: string[] = this.displayedColumns.slice();
      data: PeriodicElement[] = ELEMENT_DATA;
    
    // SOMEWHERE HERE YOU ADD LOOP THROUGH YOU DATA, IF ITEM HAS MORE DATA THAN THE NUMBER OF COLUMNS AVAILABLE, CALL AddColumn passing column name.
      addColumn(new_column) {
         this.columnsToDisplay.push(new_column);
        this.displayedColumns.push(new_column);
      }

Html

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

Angular material dynamic table: https://material.angular.io/components/table/examples