Angular Material 表是否具有“组页脚”功能？答案

【问题标题】：Is Angular Material table "group footer" capable?Angular Material 表是否具有“组页脚”功能？
【发布时间】：2023-02-22 20:19:32
【问题描述】：

尝试显示 mat-table 组，我能够显示组标题但不能显示组页脚，您可以在 StackBlitz 上查看结果

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mb-8">
  <ng-container matColumnDef="ref">
    <th mat-header-cell *matHeaderCellDef> ref </th>
    <td mat-cell *matCellDef="let element"> {{element.ref}} </td>
    <td mat-footer-cell *matFooterCellDef> Total</td>
  </ng-container>

  <ng-container matColumnDef="credit">
    <th mat-header-cell *matHeaderCellDef> Total </th>
    <td mat-cell *matCellDef="let element"> {{element.credit}}</td>
    <td mat-footer-cell *matFooterCellDef> {{getTotalCredit()}}</td>
  </ng-container>

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

  <!-- Group header -->
  <ng-container matColumnDef="groupHeader">
    <td colspan="999" style="background-color: yellow;" mat-cell *matCellDef="let group">
      <mat-icon *ngIf="group.expanded">expand_less</mat-icon>
      <mat-icon *ngIf="!group.expanded">expand_more</mat-icon>
      <strong>{{group[groupByColumns[group.level-1]]}}</strong>
      <strong>({{group.totalCounts}})</strong>
      </td>
  </ng-container>

  <!-- Group footer -->
  <ng-container matColumnDef="groupFooter">
    <td class="bg-blue-300" colspan="999" mat-cell *matCellDef="let group">
      <strong class="ml-4">({{group.totalCounts}})</strong>
    </td>
  </ng-container>

  <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="groupHeaderClick(row)"> </tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: ['groupFooter']; when: isGroup">AA </tr>    
</table>

我错过了什么？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

看起来问题可能是组页脚未显示，因为它包含在由 matRowDef 指令定义的行中。

要显示组页脚，您应该为组页脚行定义一个单独的 matFooterRowDef 指令，并在其中包含 groupFooter 列，如下所示：

<tr mat-footer-row *matFooterRowDef="['groupFooter']"></tr>

此外，确保 isGroup 谓词函数为组页脚行返回 true，以便它包含在表中。您可以像这样定义函数：

isGroup(index: number, item: any): boolean {
  return !!item.isGroup;
}

其中 item.isGroup 是您在 dataSource 中的每个项目上设置的属性，用于指示它是组页眉还是组页脚。

通过这些更改，组页脚应显示在每个组的下方。

【讨论】：