獲取與角2

Question

我襯衫的數組的數組中的每個項目的總價值，每件襯衫都有一個價格，我想用角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項目添加在一起。這個問題的另一個要素是我應該在組件上還是在服務中這樣做？

編輯： 我做了如下的變化，但我得到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); 
    }); 
    } 
} 

Answer 1

您的在答案解決之前調用-loop。 您可以在promise解析函數中執行for-loop。像這樣：

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

更新
您的JSON結構具有成本屬性作爲應編輯成數字類型的像這樣的字符串類型：

shirts: [ 
{ 
name: 'shirt 1', 
cost: 20 
} 
... 
] 

或者，你可以改變你總結成本的線是：

this.shirts.forEach(s => this.totalCost += parseFloat(s.cost)); 

關於喲的其他元素烏爾問題：

從angular2網站：

服務是通常具有窄的，定義明確的目的的一類。它應該做一些具體的事情，並做好。

例子包括：
- 日誌服務
- 數據服務
- 消息總線
- 稅計算器
- 應用程序配置

關於你的問題，對我來說，這是有道理的只有在計算總成本包括所有襯衫而不僅僅是名單的一部分時纔將成本計算放在服務上。

例子：
的服務總費用：如果總成本需要被檢索的後端襯衫列表後，只有一次大概計算「它也將更有意義，計算移動到服務器後臺」。

上組件總費用：如果你只顯示當前顯示的頁面上的襯衫的總成本，襯衫當前添加到購物車中，目前用戶選擇的襯衫......等等