angularjs - Angular 2 で配列内の各項目の合計値を取得する

Question

シャツの配列があり、各シャツには価格があり、Angular 2 を使用してすべてのシャツの合計価格を取得したいと考えています。

これは私のデータがどのように見えるかです:

shirts: [
{
 name: 'shirt 1',
 cost: '20'
},
{
 name: 'shirt 2',
 cost: '10'
},
{
 name: 'shirt 3',
 cost: '10'
}
]

次に、コストを一緒に追加してコンポーネントに表示したいと思います。

export class ShirtsListComponent {
  shirts: Shirts;

  constructor(@Inject(Shirts) csp: Promise<Shirts>, cdRef: ChangeDetectorRef) {
    csp.then((cs) => {
      this.shirts = cs;
      cdRef.reattach();
    });

    for (var shirt in this.shirts) {
      console.log(shirt);
    }
  }
}

問題は、ここで何も返さないことです。たとえ返されたとしても、新しいアイテムを一緒console.log(shirt)に追加する方法がわかりません。shirtこの質問のもう 1 つの要素は、これをコンポーネントで行うべきか、それともサービスで行うべきかということです。

編集: 私は次の変更を加えましたが、私は取得0しています。取得する必要があります40

html:

<ul class="list-group">
  <li class="list-group-item" [shirtListItem]="shirt" *ngFor="#shirt of shirts"></li>
</ul>
<pre>{{totalShirts}}</pre>

更新された ShirtComponent:

export class ShirtListComponent {
  shirts: Shirts;
  totalShirts:number = 0;
  constructor(@Inject(Shirts) csp: Promise<Shirts>, cdRef: ChangeDetectorRef) {
    csp.then((cs) => {
      this.shirts = cs;
      cdRef.reattach();
      this.shirts.forEach(s => this.totalShirts += s.cost );
    });
  }
}