今天接到产品的一个新需求，在列表的表尾处，添加一行计算上列数据的合计。之前其实有实现过，但函数和写法过于臃肿，今天精简实现之后打算整理成一篇博客。

函数准备

思考逻辑：
既然是合计，那么一定需要一个求和函数
求和函数首先需要的是一个数组，用来存放需要求和的数据，而后端给的是一个很复杂的object数组，只能我自己从中取得我需要的数据。
那么便可以得知，需要两个参数，一是后端给我的数组，二是用来取得数组中我需要的数据的key(或者说字段)
函数如下：

// 放入数组，及数组对应的键值
    getTotal(Array, key: string): number {
        // 初始化总和
        let tempOrderQty = 0;
        // 循环求值
        Array.forEach(value => {
            // console.log(tempOrderQty);
            tempOrderQty += toInteger(value[key]);
        });
        // 返回总值
        return tempOrderQty;
    }

html实现

因为表尾为一行数据，所以即使是其他不需要计算合计的列，也是需要进行编写一个空表尾的不需要合计的一列写法为：

        <!-- payment_type Column -->
        <ng-container matColumnDef="paymentType">
          <mat-header-cell *matHeaderCellDef fxFlex="10">付款类型</mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="10">
            <p class="text-truncate">
              {{ element.pay_type_cn }}
            </p>
          </mat-cell>
          <mat-footer-cell *matFooterCellDef>-</mat-footer-cell>
        </ng-container>

需要合计的写法为：

        <!-- handle_total_price Column -->
        <ng-container matColumnDef="handle_total_price">
          <mat-header-cell *matHeaderCellDef fxFlex="10">应付总金额</mat-header-cell>
          <mat-cell *matCellDef="let element" fxFlex="10">
            <p class="text-truncate">
              {{ element.pre_price }}
            </p>
          </mat-cell>
          <mat-footer-cell *matFooterCellDef> {{ getTotal('pre_price') | number:"0.2" }} </mat-footer-cell>
        </ng-container>

ts部分求和的写法为：

// 列表表尾合计求和函数
  getTotal(field: string): number {
    return this.general.getTotal(this.tableData, field);
  }

其中field是数组中需要求和的字段

最后实现结果如下：

AngularMaterial表格添加一行合计

函数准备

html实现