如何使用Angular mat-table为嵌套数组中的多个Flex模块渲染对应表格

步骤1：编写组件TS文件 #

先定义数据结构，将你的嵌套数组存入组件变量：

import { Component } from '@angular/core';

// 通用字段结构
interface Field {
  id: string;
  wert: string;
}

// 单条位置数据结构
interface PositionItem {
  Position: number;
  ID: Field;
  Menge: Field;
  Bezeichnung?: Field; // 标记为可选，适配部分数据缺失该字段的情况
  BP_Gesamt: Field;
}

// 模块结构
interface FlexModule {
  module: string;
  positionen: PositionItem[];
}

@Component({
  selector: 'app-flex-table',
  templateUrl: './flex-table.component.html',
  styleUrls: ['./flex-table.component.css']
})
export class FlexTableComponent {
  // 你的嵌套业务数据
  flexModuleList: FlexModule[] = [
    {
      "module": "Flex",
      "positionen": [
        {
          "Position": 0,
          "ID": {
            "id": "XLEW_1_2_2",
            "wert": "STZBH"
          },
          "Menge": {
            "id": "XLEW_1_2_5",
            "wert": "2"
          },
          "Bezeichnung": {
            "id": "XLEW_1_2_6",
            "wert": "Xpress weiss"
          },
          "BP_Gesamt": {
            "id": "XLEW_1_2_17",
            "wert": "1998,00"
          }
        },
        {
          "Position": 1,
          "ID": {
            "id": "XLEW_1_2_2",
            "wert": "STZBH"
          },
          "Menge": {
            "id": "XLEW_1_2_5",
            "wert": "5"
          },
          "Bezeichnung": {
            "id": "XLEW_1_2_6",
            "wert": "Xpress weiss"
          },
          "BP_Gesamt": {
            "id": "XLEW_1_2_17",
            "wert": "3998,00"
          }
        }
      ]
    },
    {
      "module": "Flex",
      "positionen": [
        {
          "Position": 0,
          "ID": {
            "id": "XLEW_1_2_2",
            "wert": "STZBH"
          },
          "Menge": {
            "id": "XLEW_1_2_5",
            "wert": "4"
          },
          "BP_Gesamt": {
            "id": "XLEW_1_2_17",
            "wert": "3996,00"
          }
        },
        {
          "Position": 1,
          "ID": {
            "id": "XLEW_1_2_2",
            "wert": "STZBG"
          },
          "Menge": {
            "id": "XLEW_1_2_5",
            "wert": "4"
          },
          "Bezeichnung": {
            "id": "XLEW_1_2_6",
            "wert": "Xpress schwarz"
          },
          "BP_Gesamt": {
            "id": "XLEW_1_2_17",
            "wert": "3996,00"
          }
        }
      ]
    }
  ];

  // 表格需要渲染的列
  displayedColumns: string[] = ['Position', 'ID', 'Menge', 'Bezeichnung', 'BP_Gesamt'];
}

步骤2：编写组件HTML模板 #

用*ngFor遍历外层模块数组，每个模块生成独立表格：

<!-- 遍历每个Flex模块，生成对应表格 -->
<ng-container *ngFor="let flexModule of flexModuleList">
  <!-- 模块标题 -->
  <h3>*FLEX*</h3>

  <!-- 绑定当前模块的positionen为表格数据源 -->
  <table mat-table [dataSource]="flexModule.positionen" class="s-table">
    <!-- 序号列 -->
    <ng-container matColumnDef="Position">
      <th mat-header-cell *matHeaderCellDef> Position </th>
      <td mat-cell *matCellDef="let element"> {{element.Position + 1}} </td>
    </ng-container>

    <!-- ID列 -->
    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let element"> {{element.ID.wert}} </td>
    </ng-container>

    <!-- 数量列 -->
    <ng-container matColumnDef="Menge">
      <th mat-header-cell *matHeaderCellDef> Menge </th>
      <td mat-cell *matCellDef="let element"> {{element.Menge.wert}} </td>
    </ng-container>

    <!-- 描述列 -->
    <ng-container matColumnDef="Bezeichnung">
      <th mat-header-cell *matHeaderCellDef> Bezeichnung </th>
      <td mat-cell *matCellDef="let element"> {{element.Bezeichnung?.wert ?? '-'}} </td>
    </ng-container>

    <!-- 总金额列 -->
    <ng-container matColumnDef="BP_Gesamt">
      <th mat-header-cell *matHeaderCellDef> BP_Gesamt </th>
      <td mat-cell *matCellDef="let element"> {{element.BP_Gesamt.wert}} </td>
    </ng-container>

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

注意事项 #

• 请在当前组件所属的NgModule的imports数组中导入MatTableModule、CommonModule，否则相关指令和组件无法正常渲染
• 代码对缺失的Bezeichnung字段做了兼容，不存在时会显示短横线占位，你可以根据需求调整占位内容
• 原始数据的Position从0开始，渲染时直接+1即可实现1、2的序号效果，不需要修改原始数据

内容的提问来源于stack exchange，提问作者Holterwok