角度材料表 - 摘要行 - 解决方法（材料 2）答案

【问题标题】：Angular Material Table - Summary Row - Workaround (Material 2)角度材料表 - 摘要行 - 解决方法（材料 2）
【发布时间】：2018-07-24 17:11:47
【问题描述】：

我正在从事 Angular 项目，其中我们需要以表格形式显示员工在每个项目上花费的总小时数。

我们决定为此使用角材料表。我们已经在表格中实现了过滤、分页和排序功能。现在，我们需要在表格底部显示员工花费的总小时数。当用户在表上应用过滤时，此值将更改。我们需要像 Jquery Datatable 页脚这样的东西，如下面的链接中给出的示例： Jquery Datatable footer

我的角度材料数据表的实现类似于以下链接中给出的示例表： Angular Material Datatable Example

根据这个Github Link，角材料表中没有这样的功能。

谁能帮我找到解决方法？

【问题讨论】：

如果您想在每个页面和每个过滤器案例上显示一些摘要，那么最好在表格之外显示，作为一个单独的模块，就像您（和角度材料团队）对过滤器输入所做的那样和分页。订阅所有表更改并适当地计算汇总块
@VagrantAI ，回复。我想在每个过滤器上显示摘要。你能举例说明如何订阅表格更改吗？会有帮助的。
使用 DataSource 的 connect() 函数中的 Observable

标签： angular datatable angular-material

【解决方案1】：

这是我在 Angular 5 中汇总所有（材料）数据表行的方式：

组件中的功能：

  calculation() {
    let sum: number = 0;
    if (this.dataSource)
      for (let row of this.dataSource.data) {
        if (row.id != 0) sum += row.iznos;
      }
    return sum;
  }

html 表格下方的一行：

   {{ calculation() }}

注意：我将 row.id 与 0 进行比较以排除一些（未保存的）行...

【讨论】：

它有效，但如果我只想使用分页汇总页面记录？
最好使用reduce
这是一个不好的解决方案，每次角度运行变化检测时都会调用calculation()，这会经常触发。

【解决方案2】：

是的，您可以使用 Angular 材料表本身来做到这一点。您可以添加页脚行并将值绑定到您自己的某个函数调用以显示该行中的总值。

这是来自 Angular Material Docs 的示例参考：https://stackblitz.com/angular/jxyeybxbayx?file=app%2Ftable-sticky-footer-example.ts

【讨论】：

【解决方案3】：

将total hours 存储为组件的属性，并在每次需要重新计算时重新计算。例如在应用过滤时。
并在您的组件模板中添加
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
告诉角度表显示页脚行。至于页脚单元格本身：

<ng-container matColumnDef="hours">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Hours </th>
    <td mat-cell *matCellDef="let element"> 
        Hours: {{ element.hours }}
    </td>
    <td mat-footer-cell *matFooterCellDef>
        Total hours: {{ totalHours }}
    </td>
</ng-container>

@Ivica Buljević 提出的解决方案可行，但每次用户与页面交互时都会触发calculation() 函数，这会带来额外的性能开销，我怀疑这是不希望的。

【讨论】：

【解决方案4】：

对于任何对此感到疑惑的人。 Material 在 dataSource 上包含一个名为“filteredData”的指令。

我能够像这样实现它。

doFilter(fitlervalue: string) { this.dataSource.filter = fitlervalue.trim().toLocaleLowerCase(); this.totalDuration = this.dataSource.filteredData.map(t => t.duration).reduce((acc, value) => acc + value, 0) }

将总行绑定到元素。在我的例子中，它是总持续时间。

<td mat-footer-cell *matFooterCellDef> {{totalDuration | number }} </td>

我的输入字段如下所示：

<input type="text" matInput (keyup)="doFilter($event.target.value)" placeholder="Filter past exercises">

请注意，您可能需要设置一个在 ngOnInit 下调用的函数以查看初始值。

【讨论】：