Question

我正在尝试计算ngFor之外的总数（金额总和）。

HTML

 <div *ngFor="let item of items">
    <input type="text" [(ngModel)]="item.price">  
    <input type="text" [(ngModel)]="item.quantity" (ngModelChange)="item.amount=item.quantity*item.price">
    <input type="text" [(ngModel)]="item.amount">    
</div>
<input type="text" [(ngModel)]="totalAmount">

Scripe

getTotal() {
    let total = 0;
    for (var i = 0; i < this.items.length; i++) {
        if (this.items[i].amount) {
            total += this.items[i].amount;
            this.totalamount = total;
        }
    }
    return total;
}

当我调用 getTotal（）函数时，它返回总计。但是，我怎么能在文本框中调用它？或任何其他方法。

任何人都可以帮我解决这个问题。

Answer 1

您始终可以使用单向绑定{{ }}

绑定到模板上的函数

在您的代码中，如果您想调用您的函数并将其直接绑定到您的视图，您可以这样做：

<input type="text" value='{{ getTotal() }}' />

Answer 2

我认为Angular需要更内在的东西才能实现这一目标。上面的{{items}}只是一个数组，事情很简单。如果它是一个可观察的，那么你将在模板和课堂上订阅它。如果在ngFor中过滤了observable，则需要在类方法中重复过滤。

我能想到的最好的是管道：

<div *ngFor="let item of items$ | async as list">
</div>
<div>{{list.reduce((acc,val) => acc + val.amount, 0)}}</div>

我无法想象你为什么要将计算的和绑定到输入字段，所以我只是在这里显示了值。

不幸的是，它仍然意味着将列表循环两次。

Angular 2：计算ngFor中元素的总和

2 个答案: