如何在Angular的mat-tab中按样本筛选展示JSON缺陷数据？

1. 数据预处理（组件逻辑） #

先把原始缺陷数据按sample和defect等级分组，避免模板内重复过滤，提升渲染性能。

示例原始数据 #

// 组件内定义的缺陷数据集
defectData = [
  { defectClassification: '裂纹', sample: '样本1', defect: 'Critical' },
  { defectClassification: '变形', sample: '样本1', defect: 'Major' },
  { defectClassification: '划痕', sample: '样本2', defect: 'Minor' },
  { defectClassification: '断裂', sample: '样本2', defect: 'Critical' },
  // 更多缺陷数据...
];

分组处理逻辑 #

在组件ngOnInit钩子中完成数据分组，生成按样本聚合的结构：

groupedDefects: { [sample: string]: { critical: any[], major: any[], minor: any[] } } = {};
sampleTabs: string[] = [];

ngOnInit() {
  // 按样本和缺陷等级分组
  this.groupedDefects = this.defectData.reduce((acc, item) => {
    // 初始化当前样本的分组容器
    if (!acc[item.sample]) {
      acc[item.sample] = { critical: [], major: [], minor: [] };
    }
    // 按缺陷等级归类数据
    switch (item.defect.toLowerCase()) {
      case 'critical':
        acc[item.sample].critical.push(item);
        break;
      case 'major':
        acc[item.sample].major.push(item);
        break;
      case 'minor':
        acc[item.sample].minor.push(item);
        break;
    }
    return acc;
  }, {} as typeof this.groupedDefects);

  // 提取所有唯一样本作为Tab标签列表
  this.sampleTabs = Object.keys(this.groupedDefects);
}

2. 组件模板实现 #

使用mat-tab-group遍历样本生成标签页，每个标签页内放置三个表格，分别绑定对应等级的缺陷数据：

<mat-tab-group>
  <!-- 遍历样本生成Tab页 -->
  <mat-tab *ngFor="let sample of sampleTabs" [label]="sample">
    <!-- Critical等级表格 -->
    <h3>Critical</h3>
    <table mat-table [dataSource]="groupedDefects[sample].critical" class="mat-elevation-z8">
      <ng-container matColumnDef="defectClassification">
        <th mat-header-cell *matHeaderCellDef>缺陷分类</th>
        <td mat-cell *matCellDef="let element">{{element.defectClassification}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['defectClassification']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['defectClassification']"></tr>
    </table>

    <!-- Major等级表格 -->
    <h3>Major</h3>
    <table mat-table [dataSource]="groupedDefects[sample].major" class="mat-elevation-z8">
      <ng-container matColumnDef="defectClassification">
        <th mat-header-cell *matHeaderCellDef>缺陷分类</th>
        <td mat-cell *matCellDef="let element">{{element.defectClassification}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['defectClassification']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['defectClassification']"></tr>
    </table>

    <!-- Minor等级表格 -->
    <h3>Minor</h3>
    <table mat-table [dataSource]="groupedDefects[sample].minor" class="mat-elevation-z8">
      <ng-container matColumnDef="defectClassification">
        <th mat-header-cell *matHeaderCellDef>缺陷分类</th>
        <td mat-cell *matCellDef="let element">{{element.defectClassification}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['defectClassification']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['defectClassification']"></tr>
    </table>
  </mat-tab>
</mat-tab-group>

3. 优化建议 #

• 表格列定义可抽成ng-template复用，减少重复代码
• 数据量大时，可使用MatTableDataSource添加分页、排序功能
• 若数据为异步获取，需在数据返回后再执行分组逻辑

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