使用 mat-table 显示嵌套数组

Question

我正在使用一个具有嵌套数组的对象，类似于这样

Foo_Chain.Foo需要分栏显示

客户编号 | Foo_Type |富 1 |富 2

Foo_Type 不是问题，因为我可以轻松访问它，但其他 2 个属性属于 Foo_Chain 嵌套数组，我在尝试显示时遇到问题它

[
   {
      "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"
         }
      ]
   },
   {
      "clientId":"44",
      "Foo_Type":"LOP",
      "Foo_Chain":[
         {
            "Imported":true,
            "Foo":"LOP 1"
         },
         {
            "Imported":true,
            "Foo":"LOP 2"
         }
      ]
   }

<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> {{'Foo_Type 1' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{element.FooChain.Foo[0]}}
              </td>
            </div>
          </ng-container>
          <ng-container matColumnDef="servtype2">
            <th mat-header-cell *matHeaderCellDef> {{'Serv_Type' | uppercase}} </th>
            <div fxLayout="row">
              <td mat-cell *matCellDef="let element" class="data-column">
              {{element.FooChain.Foo[1]}}
              </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

如果是固定的，总是2 FOO。你可以这样做。

 {{element.FooChain[0].Foo}}

{{element.FooChain[1].Foo}}

但是，我不确定您是否可以根据需要对这些属性进行排序和过滤。如果数量不同，则必须实施 ng-for。

 <mat-cell *matCellDef="let element">
        <div>
          <ng-container  *ngFor="let item of element?.FooChain">
            <div >
                <span>{{item.Foo}}</span>
            </div>
          </ng-container>
        </div>
    </mat-cell>

使用 mat-table 显示嵌套数组

Displaying nested array with mat-table

nested-lists

angular

mat-table