Angular2: назначить поле компонента в #ngFor

Question

У меня есть такой компонент:

@Component({ 
     selector: "expenses-component", 
     templateUrl: "expenses.html" 
    }) 
    export default class ExpensesComponent { 
     private expenses: [] = [{name: "Foo", amount: 100}, {name: "Bar", amount: 200}]; 
     private totalAmount: number = 0; 
    } 

, а также такие шаблона:

<h2 class="sub-header">Total: {{total | currency:"USD":true}}</h2> 
<div class="table-responsive"> 
    <table class="table table-hover table-condensed"> 
     <thead> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Amount</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor="let expense of expenses | orderByDate; let id = index"> 
      <td>{{id + 1}}</td> 
      <td>{{expense.name}}</td> 
      <td>{{expense.amount | currency:"USD":true}}</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Мне нужно подсчитать totalAmount, но я не могу понять, как делайте это, не предоставляя другой для цикла в машинописном коде, так что есть возможность инициализировать total += expense.amount в рамках вышеописанного цикла #ngFor?

Answer 1

Насколько я знаю, это невозможно. Вы можете достичь этого, создав настраиваемый канал, который будет проходить через массив и возвращать totalAmount. В качестве параметра вы можете передать имя ключа, который вы хотите использовать в качестве значения.

Для примера:

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: 'totalAmount' 
}) 

export class totalAmount implements PipeTransform { 
    transform(value:any, key:string):any { 
     if(value){ 
      let total = 0; 

      for(let i in value){ 
      total = total + value[i][key];  
      }    

      return total; 
    } 
    return value; 
    }} 

И тогда вы можете вызвать его из HTML:

<div>{{expenses | totalAmount:"amount"}}</div> 

Answer 2

Вы могли бы сделать totalAmount в Получ() и вернуть его там?

private get totalAmount() { 
    let total = 0; 
    for (let item in this.expenses) { 
     total += item.amount; 
    } 
    return total; 
}