Angular 2: Calculate sum of an element in ngFor

Question

I am trying to calculate the total (sum of amounts) outside the ngFor.

HTML

 

    

        
                      

              相关标签:
       
      

Answer 1

I think Angular need something more intrinsic to achieve this. The {{items}} above is simply an array and things are simple. If it were an observable, then you'll be subscribing to it in the template and in the class. If the observable is filtered in the ngFor, then you need to repeat the filtering in the class method.

The best that I can come up with is a pipe:

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

I can't imagine why you should want to bind the computed sum to an input field, so I just displayed the value here.

Unfortunately, it still means looping the list twice.

Answer 2

You can always bind to the function on your template by using the one-way bind {{ }}

In your code if you wanted to call your function and bind it directly to your view you would do such:

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