Question

我正在尝试在将项目添加到购物篮时更新购物车计数，我认为唯一可以使用localStorage保存项目但是我想在用户添加后立即更新用户界面一件物品。

所以我认为我可以创建一个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);
}

我想从我的array中检索app.component项，认为它就像这样简单，但不是因为this.basketCount正在返回[]空数组。我希望显示的是array长度(10) Items。

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

Plnkr example

Answer 1

是的，它就像获取数组一样简单。它可能不适用于您的情况，因为您在ngOnInit（）中执行它，该数组在数组仍为空时仅运行一次。但是如果你把它放在其他地方，例如在你的应用程序组件模板中，你会看到它如何更新：

	<form>
		<input type="email" class="style1">
		<input type="password" class="style1">
		<textarea class="style1"></textarea>
	</form>

为了使其更具可读性，您还可以使用计算属性：

<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;
}

Answer 2

我看到你已经从上面得到了答案，但我是ngrx的忠实粉丝，并为我解决任何这样的情况。我强烈建议你看看它。商店级别的解决方案始终有效，并且一旦您掌握它就会上瘾：）

Angular 2使用SharedService将项目推送到数组以更新UI

2 个答案: