如何使用 Angular 计算表格列的总和并在页脚中显示？

I am trying to show the total of the column values in table footer using Angular.

 <mat-header-row class="sticky-header" *matHeaderRowDef="['player', 'team', 'goals']"></mat-header-row>
      <mat-row *matRowDef="let row; columns: ['player', 'team', 'goals']"></mat-row>
      <mat-row class="sticky-footer" *matRowDef="let row: columns: ['total']; when:isLastRow"></mat-row>

...

 export class AppComponent {

  dataSource: PlayerDataSource;

  isLastRow = (data, index) => index === this.players.length;

  players = STATS.slice();

  constructor() {
    this.dataSource = new PlayerDataSource();
    this.dataSource.use(this.players.slice());
  }

}

读完这篇文章后github 主题 https://github.com/angular/material2/issues/7548我创建这次堆栈闪电战 https://stackblitz.com/edit/angular-jk2jtx示例，但总和不显示在页脚中。

谁能解释一下这个问题？没有这方面的例子。谢谢。

里面有说明角材料文档 https://material.angular.io/components/table/overview#footer-row以及中的一个样本examples https://material.angular.io/components/table/examples.

您需要做的是以与每列中的标题类似的方式定义页脚单元格。在页脚列的列绑定中，您可以直接定义计算总和的方式。无需添加另一行包含总数据。之后，您只需添加页脚行定义即可，一切正常。

以下是示例中更改后的模板：

<mat-table [dataSource]="dataSource">

  <!-- Columns -->
  <ng-container matColumnDef="player">
    <mat-header-cell *matHeaderCellDef> Player </mat-header-cell>
    <mat-cell *matCellDef="let player"> {{ player.name }}</mat-cell>
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <ng-container matColumnDef="team">
    <mat-header-cell *matHeaderCellDef> Team </mat-header-cell>
    <mat-cell *matCellDef="let player"> {{ player.team }}</mat-cell>
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <ng-container matColumnDef="goals">
    <mat-header-cell class="right-align" *matHeaderCellDef> Goals </mat-header-cell>
    <mat-cell class="right-align" *matCellDef="let player"> {{ player.goals }}</mat-cell>
    <mat-footer-cell *matFooterCellDef> Total: {{ calculateTotal() }}</mat-footer-cell>
  </ng-container>

  <!-- Rows -->
  <mat-header-row class="sticky-header" *matHeaderRowDef="['player', 'team', 'goals']"></mat-header-row>
  <mat-row *matRowDef="let row; columns: ['player', 'team', 'goals']"></mat-row>
  <mat-footer-row class="sticky-footer" *matFooterRowDef="['player', 'team', 'goals']"></mat-footer-row>

</mat-table>

并且还更改了组件代码，因此您不需要修改数据。

export class AppComponent {

  dataSource: PlayerDataSource;

  isLastRow = (data, index) => index === this.players.length;

  players = STATS.slice();

  constructor() {
    this.dataSource = new PlayerDataSource();
    this.dataSource.use(this.players.slice());
  }

  public calculateTotal() {
    return this.players.reduce((accum, curr) => accum + curr.goals, 0);
  }

}


export class PlayerDataSource extends DataSource<PlayerOrTotal> {

  dataWithTotal = new BehaviorSubject<PlayerOrTotal[]>([]);

  use(players: Player[]) {
    this.dataWithTotal.next([ ...players]);
  }

  connect(): Observable<PlayerOrTotal[]> {
    return this.dataWithTotal.asObservable();
  }

  disconnect() {}
}

我也创建了你的一个叉子堆栈闪电战 https://stackblitz.com/edit/angular-o5p4dm?file=src%2Fapp%2Fapp.component.ts在那里你可以看到它的工作原理。