Angular 2使用SharedService將項目推送到陣列以更新UI

我試圖在將項目添加到購物籃時更新購物車計數，但我認爲唯一的方法是使用localStorage保存項目但是我想更新一旦用戶添加一個項目，用戶界面。Angular 2使用SharedService將項目推送到陣列以更新UI

所以我認爲我可以創建一個SharedService並將其推送到那裏，但是如何在用戶添加項目時從該服務檢索項目的array以更新UI？

SharedService迄今爲止 -

export class SharedServiceService { 
public itemArr: any = []; 
    constructor() { } 

    itemCollection(item) { 
    this.itemArr.push(item); 
    console.log(this.itemArr); 
    } 
}

我AddToBasket組件功能 -

addToBasket(itemCode) { 
    this.sharedServiceService.itemCollection(itemCode); 
}

我想從我的app.component檢索項目的array，認爲這會是這麼簡單但是它不是這個this.basketCount返回[]空數組。我想展示的是array長度(10) Items。

ngOnInit() { 
// console.log(this.sharedServiceService.itemArr); 
    this.basketCount = this.sharedServiceService.itemArr; 
    }

Plnkr example

來源

2017-04-12 MrNew

是的，這是因爲越來越陣列一樣簡單。它可能不適用於你的情況，因爲你正在ngOnInit（）中執行它，當數組仍然爲空時，它只運行一次。但是，如果你把它放在別的地方，例如在你的應用程序組件的模板，你將看到它如何更新：

<div> 
    <h2>Basket Count ({{sharedService.itemArr.length}}) show count</h2> 
    <app-basket></app-basket> 
    {{ sharedService.itemArr | json }} 
</div>

爲了使其更具可讀性，你也可以使用計算性能：

private get basketCount():number { 
    return this.sharedService.itemArr.length; 
} 

private get basket { 
    return this.sharedService.itemArr; 
}

然後你只需插值計算性能：

<div> 
    <h2>Basket Count ({{ basketCount }}), or ({{ basket.length }}) show count</h2> 
    <app-basket></app-basket> 
    {{ basket | json }} 
</div>

來源

2017-04-12 20:22:27 kontiki

哦，你是天才的先生！以爲我必須訂閱它或什麼。 – MrNew

很高興它的工作，如果你要使用計數很多，你可能想要創建一個計算屬性：'私人get basketCount（）：數字{返回this.sharedService.itemArr.length; }'然後直接插入'{{basketCount}}'。陣列也一樣。 – kontiki

介意更新您的答案，以便閱讀？ – MrNew

-1

我看你已經得到了答案上面，但我NGRX的大風扇和作品爲我任何這樣的情況。我強烈建議你看看它。商店一級的解決方案始終有效，一旦你掌握了它，就會上癮:)

來源

2017-04-13 01:26:48 Abhi

你的解決方案的例子將不勝感激:)否則，這應該是一個評論，而不是答案。 – MrNew

Angular 2使用SharedService將項目推送到陣列以更新UI

回答

相關問題