Angular Material 表 - 摘要行 - 解决方法( Material 2)

Question

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

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

我对 Angular Material 数据表的实现与以下链接中给出的示例表类似: Angular Material Datatable Example

根据这个Github Link , Angular Material 表中没有此功能。

谁能帮我找到解决方法？

Answer 1

这就是我在 Angular 5 中对所有( Material )dataTable 行求和的方式:

组件中的函数:

  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 进行比较以排除一些(未保存的)行...