角材料表页脚总计答案

【问题标题】：Angular material table footer totals角材料表页脚总计
【发布时间】：2020-04-12 19:34:05
【问题描述】：

我正在使用角度材料表 8.2.3。我有很多表是从打字稿中的定义生成的。大多数表格都与数字有关，因此我必须在页脚显示总计。问题是材料页面中的材料表示例只有一列，并且没有显示如何处理多列。我正在寻找一种动态计算列总和的方法。我有以下代码，但它不执行：

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

【问题讨论】：

请创建stackblitz.com，以便我们轻松识别问题。
你为什么在模板中使用this？

标签： angular typescript angular-material

【解决方案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 - 在数据绑定语法中调用方法会消耗大量性能，因此应处理极端情况。

如果您想了解更多关于在数据绑定语法中调用方法的后果，请参阅此主题：

Angular Performance: DOM Event causes unnecessary function calls

【讨论】：

嗨@Sidd 我们可以在模板中写this 吗？
@SiddharthPal，是的，我们可以 :) 尝试分叉一个 Angular Stackblitz 并将其写入模板 <p>{{ this | json }}</p>
@SiddAjmera 我得到Error: Template parse errors: Parser Error: Missing expected ) at column 29 in [ {{dataSource.data.reduce((data, val) => data+= val.cell(row), 0)}} ] in ng:///BestExecutionModule/RejectionsReportComponent.html@69:70 ("">{{ column.cell(row) }}</td> <td mat-footer-cell *matFooterCellDef>[ERROR ->] {{dataSource.data.reduce((data, val) => data+= val.cell(row), 0)}} </td> "):
尝试最新的更新，我将整个语法移至模板并将其存储在data 属性中，然后仅使用模板中的数据属性。
它不起作用。Property 'cell' does not exist on type 'Client'。我不知道您是否阅读了我的整个帖子或只是代码部分。我正在寻找一种动态计算表格总数的方法

【解决方案2】：

我认为在您的示例中，您忘记关闭 {{ 中的 <td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>

您可以从模板调用函数并在那里计算列的总和。例如：

<td mat-footer-cell *matFooterCellDef> {{calculateSum()}} </td>

在 .ts 文件中：

calculate() {
  // calucating

  return value;
}

【讨论】：