如何根据另一个汇总的 mat-cell 更改一个 mat-cell 值

Question

我正在使用 Angular 和 Angular Material 进行开发，我是新手（在 8 atm 上），并且通常设法找到我的大多数问题的答案，但找不到这个问题的答案。

我有一个交易的主细节垫表，主垫表具有来自细节行的“总”金额。我现在正在尝试做的，但找不到答案，是让另一个“状态”列显示文本，具体取决于正\负“总”值。

这是我的主从 json。

[
    {
        "id": "50891",
        "description": "February 2020",
        "detail": [
            {
                "Id": 88708,
                "PaymentDate": "2020-02-24",
                "Amount": -58.0,
                "Method": "Charge",
                "Type": "Charge"
            },
            {
                "Id": 88709,
                "PaymentDate": "2020-03-02",
                "Amount": -58.0,
                "Method": "Charge",
                "Type": "Charge"                
            }
        ]
    }   
]

这是我的 mat-cell 列。 'total' 列正在调用一个函数来计算总 'amount' 值。

<ng-container matColumnDef="status">
    <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{ ?? }} </mat-cell>
</ng-container>
<ng-container matColumnDef="total">
    <mat-header-cell *matHeaderCellDef> Total </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{ total(row) | currency: 'GBP' }} </mat-cell>
</ng-container>

这是 ts 文件中进行计算的函数。

total(model: any) {
    return model.details.map(t => t.amount).reduce((acc, value) => acc + value, 0);
}

所以，我现在要做的是根据计算的“总计”列在“状态”列中设置“借方”或“贷方”文本值。我搜索和搜索，但无法找到答案或弄清楚。有谁知道我可以做到这一点的方法吗？

非常感谢

Answer 1

您可以使用与总额相同的格式，方法是插入一个基于总值返回“借方”或“贷方”的函数。

  <ng-container matColumnDef="status">
    <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{ getStatus(row) }} </mat-cell>
  </ng-container>

getStatus(mode: any) {
  let total = model.details.map(t => t.amount).reduce((acc, value) => acc + value, 0);
  return (total < 0) 'debit' : 'credit';
}

您可能要考虑的另一个策略是遍历您的数据并将这些属性（状态和总计）添加到组件初始化的数据中。当您像在此处所做的那样在模板中放置一个函数时，这些函数会在每次重新渲染时运行，因此在开始时运行一次会更便宜。