Angular Material 表页脚总计

Question

我正在使用 Angular Material 表 8.2.3。我有很多表是根据 typescript 中的定义生成的。大多数表格都与数字有关，所以我必须在页脚显示总数。问题是 Material 页中的 Material 表示例只有一列，没有显示如何处理多列。我正在寻找一种动态计算列总和的方法。我有以下代码，但它没有执行:

<table mat-table [dataSource]="dataSource" matSort matSortActive="Date" matSortDisableClear="true">

    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</th>
        <td mat-cell *matCellDef="let row">{{ column.cell(row) }}</td>
        <td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>
    </ng-container>

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

Answer 1

您没有正确编写 string 插值语法。

您的代码缺少结尾 }}

这是固定模板:

<table 
  mat-table 
  [dataSource]="dataSource" 
  matSort 
  matSortActive="Date" 
  matSortDisableClear="true">

  <ng-container 
    *ngFor="let column of columns" 
    [matColumnDef]="column.columnDef">
    <th 
      mat-header-cell 
      *matHeaderCellDef 
      mat-sort-header>
      {{ column.header }}
    </th>
    <td 
      mat-cell 
      *matCellDef="let row">
      {{ column.cell(row) }}
    </td>
    <td 
      mat-footer-cell 
      *matFooterCellDef>
      {{ dataSource.data.reduce((data, val) => data+= val.cell(row), 0) }} 
    </td>
  </ng-container>

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

然后您可能必须将 dataSource 公开，以便它可以在模板中访问。

但考虑到 dataSource 很可能是组件中的某种依赖项，最好只公开公开 data 属性。

所以你可能想创建一个看起来像这样的属性:

data = this.dataSource.data.reduce((datum, val) => datum+= val.cell(row), 0);

然后在对结果进行插值的地方，您可以这样做:

<td
  mat-footer-cell
  *matFooterCellDef>
  {{ data }} 
</td>

PS - Calling methods in a Data Binding Syntax can cost a lot of performance and so it should be dealt with extreme case.

Refer to this thread if you want to know more about the consequences of calling methods in data binding syntaxes:

Angular Performance: DOM Event causes unnecessary function calls