Question

我正在开展角度项目，我们要求以表格形式显示员工在每个项目上花费的总时间。

我们决定使用角度材料表。我们已经在表格中实现了过滤，分页和排序功能。现在，我们需要在表格底部显示员工所花费的总时间。当用户对表应用过滤时，此值将更改。我们需要类似Jquery Datatable页脚的内容，如下面链接中给出的示例： Jquery Datatable footer

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

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

任何人都可以帮我找到解决方法吗？

Answer 1

这是我对Angular 5中所有（材质）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进行比较以排除一些（未保存的）行...

Answer 2

对于任何对此感到疑惑的人。资料已在数据源上包含一个名为“ 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下调用以查看初始值。

Answer 3

是的，您可以使用Angular Material Table本身来完成。您可以添加页脚行，并将该值绑定到您自己的某个函数调用上，以显示该行中的总值。

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

Answer 4

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

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

角度材料表 - 汇总行 - 解决方法（材料2）

4 个答案: