Angular组件等待服务从API接收数据

Question

您好，我的应用中有一个service和一个“组件”。

我的service正在从API接收数据：

getNewShoppingCart() {
  this.serverService.getShoppingCart().subscribe(
    (data) => {
      this.basket.boughtItems = data;
      });
}

我的component有一些使用service接收到的对象的方法。

由于component是在service获取数据之前渲染的，因此控制台中存在一些错误。

如何强制组件等待数据加载完毕？

Answer 1

您需要在组件中添加 null / length 。例如，如果您使用该对象 this.basket.boughtItems 从服务接收数据，则在ngIf条件中添加组件，例如* ngIf =“ basket.boughtItems.length> 0”

Answer 2

使方法返回Observable或直接使用服务。

getNewShoppingCart(): Observable<ItemsType> {
  return this.serverService.getShoppingCart()
}

在组件中创建一个BehaviorSubject字段。

shopingCart = new BehaviorSubject();

在ngOnInit上放入一些数据：

shopingCart.next(this.getNewShoppingCart())

在组件中使用async管道指向shopingCart

在需要的地方从BehaviorSubject获取值，如下所示：

shopingCart.getValue()