如何使用Angular计算表列的总和并在页脚中显示? [英] How to calculate sum of table columns and show in footer using Angular?

问题描述

我正在尝试使用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主题之后，我创建了

After reading this github topic I created this stackblitz example but the sum is not displayed in the footer.

有人可以阐明这个问题吗?没有关于此的示例.谢谢.

Can anyone shed some light on this subject? There is no example regarding this. Thank you.

推荐答案

示例中的示例.

您需要做的是以与在每一列中的页眉相同的方式定义页脚单元.在页脚列的列绑定中，直接定义如何计算总和.无需在总数据中添加另一行.之后，您还只需添加页脚行定义即可，一切正常.

What you need to do is define a footer cell in a similar fashion you do for the headers in every column. In the column bindings for the footer column you define directly how you calculate the sum. There is no need to add another row with the total data. After that you just add also a footer row definition and it all works.

这是示例中更改后的模板:

Here is the changed template from your sample:

<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>

以及更改后的组件代码，因此您无需修改​​数据.

And also the changed component code so you see you do not need to modify the data.

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() {}
}

我还为您的 StackBlitz 在哪里可以看到它正常工作.

I have created also a fork of your StackBlitz where you can see it working.

这篇关于如何使用Angular计算表列的总和并在页脚中显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！