Question

一直在看几个博客和SO问题。在我的模板中，我有：

<tr *ngFor="let item of invoice_items; let x=index">
    <td>{{x+1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.quantity}}</td>
    <td>{{item.unitprice}}</td>
    <td>{{subTotal(item.quantity,item.unitprice)}}</td>
</tr>

<tr>
    <td>Total</td><td>{{total}}</td>
</tr>

在我的组件中：

let total:number=0;

subTotal(q:number,p:number){
    let subtotal:number=q * p;

    this.total=this.total + subtotal;
    return subtotal;
}

现在我打印出{{total}}时出现上述错误。我目前的解决方案是通过循环计算组件本身的总数。但它意味着循环两次（在组件和html中）。

Answer 1

您应该计算组件方面的总体总数，例如使用Array#reduce：

this.total = this.invoice_items
  .reduce((total, item) => total + item.quantity * item.unitprice, 0);

然后在模板方面，替换：

{{subTotal(item.quantity,item.unitprice)}}

简单地说：

{{item.quantity * item.unitprice}}

计算小计总数时ExpressionChangedAfterItHasBeenCheckedError

1 个答案: