Question

我正在使用角材表格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>

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 -数据绑定语法中的调用方法可能会花费很多性能，因此应处理极端情况。

如果您想了解有关数据绑定语法中调用方法的后果的更多信息，请参考此线程：

Angular Performance: DOM Event causes unnecessary function calls

Answer 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;
}

角材料表页脚总计

2 个答案: