Angular由一个bug说起之十六：Angular 透视表Pivot Table

原创于 2025-07-29 10:51:20 发布 · 658 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#angular

Angular 专栏收录该内容

69 篇文章

订阅专栏

请添加图片描述

在现代前端开发中，数据分析与可视化是提升用户体验和决策效率的重要手段。在数据分析和可视化场景中，透视表（Pivot Table）是极为常用的组件。它能够灵活地对原始数据进行分组、汇总和多维展示。
本文将以一个基于 Angular 框架的项目为例，逐步演示如何从最基础的数据表格出发，逐步构建出功能强大、结构清晰、性能优良的透视表组件。
V1：基础数据表格
首先，我们展示最原始的数据表格。该表格直接将数据源中的每一条记录以行的形式展现，便于查看原始数据内容。这种方式适用于数据量较小、结构简单的场景。但通常情况下一个表格会比较长。

V2：嵌套分组表格
嵌套分组是常见的需求。这样可以缩短列表长度。还能通过展开/收起分组提升数据可读性。适合层级结构明显的数据。

在V1表格基础上实现了按class分组的嵌套展示。这里通过展开/收起分组，可以清晰的看到每个班级的学生分数情况。

  <table mat-table [dataSource]="dataSource" class="score-table score-table-nested mat-elevation-z1">
    <!-- Group Header Row -->
    <ng-container matColumnDef="group">
      <td mat-cell *matCellDef="let group" [attr.colspan]="displayedColumns.length" (click)="toggleScoreExpand(group.className)" class="expandable-row" style="cursor:pointer;">
        {{ group.className }}
        <span class="inline-arrow">{{ expandedScores.has(group.className) ? '↓' : '→' }}</span>
        <div class="arrow"> ... </div>
      </td>
    </ng-container>
    <!-- Student Column -->
    <ng-container matColumnDef="student">
      <th mat-header-cell *matHeaderCellDef>Class</th>
      <td mat-cell *matCellDef="let row">{{ row.student }}</td>
    </ng-container>
    <ng-container matColumnDef="year">
      <th mat-header-cell *matHeaderCellDef>Year</th>
      <td mat-cell *matCellDef="let row">{{ row.year }}</td>
    </ng-container>
    <ng-container matColumnDef="score">
      <th mat-header-cell *matHeaderCellDef>Score</th>
      <td mat-cell *matCellDef="let row">{{ row.score }}</td>
      </ng-container>
    <ng-container matColumnDef="level">
      <th mat-header-cell *matHeaderCellDef>Level</th>
      <td mat-cell *matCellDef="let row">{{ row.level }}</td>
    </ng-container>

    <!-- Header row for details -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <!-- Group row -->
    <tr mat-row *matRowDef="let row; columns: ['group']; when: isGroup"></tr>
    <!-- Expanded detail rows -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns; when: isDetail"></tr>
  </table>
  <mat-paginator [pageSize]="10" [pageSizeOptions]="[10]" showFirstLastButtons [hidePageSize]="true"></mat-paginator>


 export class ScoreGroupedTableComponent implements OnInit {

    @ViewChild(MatPaginator) paginator!: MatPaginator;
    @Input() data: any[] = [];
    expandedScores = new Set<string>();
    displayedColumns: string[] = ['student', 'year', 'score', 'level'];
    groupedData: any[] = [];
    dataSource = new MatTableDataSource<any>();
    ngOnInit() {
      this.updateGroupedData();
      setTimeout(() => {
        if (this.dataSource && this.paginator) {
          this.dataSource.paginator = this.paginator;
        }
      });
    }

    toggleScoreExpand(className: string) {
      if (this.expandedScores.has(className)) {
        this.expandedScores.delete(className);
      } else {
        this.expandedScores.add(className);
      }
      this.updateGroupedData();
    }

    isGroup = (_: number, item: any) => item.isGroup === true;
    isDetail = (_: number, item: any) => !item.isGroup;

    updateGroupedData() {
      if (!this.data) {
        this.groupedData = [];
        return;
      }
      // Group by className
      const groups: any[] = [];
      const grouped = this.data.reduce((acc: Record<string, any[]>, row: any) => {
        acc[row.className] = acc[row.className] || [];
        acc[row.className].push(row);
        return acc;
      }, {} as Record<string, any[]>);
      Object.keys(grouped).forEach(className => {
        groups.push({ isGroup: true, className });
        if (this.expandedScores.has(className)) {
          groups.push(...grouped[className].map((row: any) => ({ ...row, isGroup: false })));
        }
      });
      this.groupedData = groups;
      this.dataSource.data = this.groupedData;
      if (this.paginator) {
        this.dataSource.paginator = this.paginator;
      }
    }
  }

V3：分组嵌套透视表格
这时候在V2的基础上，我们可以对数据进行透视，例如，将 Year作为一级表头，统计每年学生的分数形成横向对比减少数据行数。实现更清晰的结构分区和更强的数据对比能力。
旨在应对高复杂度、多维度、层级嵌套的数据分析需求。
亮点功能：
• 表头支持多级嵌套，视觉层次分明；
• 支持任意维度组合；

数据驱动渲染：
• 所有表头与单元格均由数据动态生成；
• 支持缺失值处理与默认占位符（如 ‘-’）；
• 可扩展为支持多指标（如 test、rank、score 等）展示。

适用场景：
• 需要按维度进行横向对比，进行复杂的交叉分析
• 数据维度较多，需清晰展示结构；

  <table mat-table [dataSource]="dataSource" class="score-table score-table-nested mat-elevation-z1">
    <!-- Group Header Row -->
    <ng-container matColumnDef="group">
      <td mat-cell *matCellDef="let group" [attr.colspan]="displayedColumns.length" (click)="toggleScoreExpand(group.className)" class="expandable-row" style="cursor:pointer;">
        {{ group.className }}
        <span class="inline-arrow">{{ expandedScores.has(group.className) ? '↓' : '→' }}</span>
        <div class="arrow"> ... </div>
      </td>
    </ng-container>
    <!-- Student Column -->
    <ng-container matColumnDef="student">
      <th mat-header-cell *matHeaderCellDef rowspan="2">Class</th>
      <td mat-cell *matCellDef="let row">{{ row.student }}</td>
    </ng-container>
    <!-- Year Grouped Header for colspan -->
    @for (year of yearColumnsGroup; track $index) {
      <ng-container [matColumnDef]="'yearGroup_' + year">
        <th mat-header-cell *matHeaderCellDef colspan="2">{{ year }}</th>
      </ng-container>
    }
    <!-- Score/Level Columns -->
      @for (year of yearColumnsGroup; track $index) {
      <ng-container [matColumnDef]="'score_' + year">
        <th mat-header-cell *matHeaderCellDef class="section-border-left">score</th>
        <td mat-cell *matCellDef="let row" class="section-border-left">{{ row['score_' + year] }}</td>
      </ng-container>
      <ng-container [matColumnDef]="'level_' + year">
        <th mat-header-cell *matHeaderCellDef>level</th>
        <td mat-cell *matCellDef="let row">{{ row['level_' + year] }}</td>
      </ng-container>
      }
    <!-- First header row: Class and year groups -->
    <tr mat-header-row *matHeaderRowDef="headerRowDef1"></tr>
    <!-- Second header row: score/level (no student) -->
    <tr mat-header-row *matHeaderRowDef="yearColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: ['group']; when: isGroup"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; when: isDetail"></tr>
  </table>
  <mat-paginator [pageSize]="10" [pageSizeOptions]="[10]" showFirstLastButtons [hidePageSize]="true"></mat-paginator>

  export class ScorePivotTableComponent implements OnInit {
    @ViewChild(MatPaginator) paginator!: MatPaginator;
    @Input() data: any[] = [];
    expandedScores = new Set<string>();
    displayedColumns: string[] = [];
    yearColumns: string[] = [];
    yearColumnsGroup: string[] = [];
    headerRowDef1: string[] = [];
    groupedData: any[] = [];
    dataSource = new MatTableDataSource<any>();

    ngOnInit() {
      this.updateGroupedData();
      setTimeout(() => {
        if (this.dataSource && this.paginator) {
          this.dataSource.paginator = this.paginator;
        }
      });
    }

    toggleScoreExpand(className: string) {
      this.expandedScores.has(className)
        ? this.expandedScores.delete(className)
        : this.expandedScores.add(className);
      this.updateGroupedData();
    }

    isGroup = (_: number, item: any) => item.isGroup === true;
    isDetail = (_: number, item: any) => !item.isGroup;

    updateGroupedData() {
      if (!this.data) {
        this.groupedData = [];
        return;
      }
      const years = Array.from(new Set(this.data.map(row => row.year))).sort();
      this.yearColumnsGroup = years;
      this.yearColumns = years.flatMap(year => [`score_${year}`, `level_${year}`]);
      this.displayedColumns = ['student', ...this.yearColumns];
      this.headerRowDef1 = ['student', ...years.map(y => 'yearGroup_' + y)];
      const grouped = this.data.reduce((acc: Record<string, any[]>, row: any) => {
        (acc[row.className] ||= []).push(row);
        return acc;
      }, {} as Record<string, any[]>);
      const groups: any[] = [];
      for (const className in grouped) {
        groups.push({ isGroup: true, className });
        if (this.expandedScores.has(className)) {
          const students = Array.from(new Set(grouped[className].map((row: any) => row.student)));
          for (const student of students) {
            const studentRow: any = { isGroup: false, student };
            for (const year of years) {
              const found = grouped[className].find((row: any) => row.student === student && row.year === year);
              studentRow[`score_${year}`] = found?.score ?? '';
              studentRow[`level_${year}`] = found?.level ?? '';
            }
            groups.push(studentRow);
          }
        }
      }
      this.groupedData = groups;
      this.dataSource.data = this.groupedData;
      if (this.paginator) {
        this.dataSource.paginator = this.paginator;
      }
    }
  }

在这里插入图片描述
优化建议
• 数据结构设计：建议在后端或服务层预处理数据，减少前端计算压力；
• 组件解耦：将透视逻辑封装为服务，提升复用性；
• 交互增强：可加入字段拖拽、动态维度选择、导出 Excel 等功能；
• 可视化联动：结合图表库实现图表与表格联动展示。
总结
通过以上三个阶段的实践，我们可以看到 Angular 在实现透视表和复杂表格方面的强大能力。无论是基础表格、单维透视、多维分组，还是嵌套分组与多维透视的结合，都可以通过合理的数据结构设计和模板渲染轻松实现。希望本文能为你在实际项目中实现和优化透视表提供参考和启发！