Угловой компонент, ожидающий службы для получения данных от API

Question

Привет, в моем приложении у меня есть service и `компонент '.

Мой service получает данные из API:

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

, а мой component имеетполучил некоторые методы, которые используют объект, полученный с помощью service.

Поскольку component отрисовывается до того, как service получает данные, у меня есть некоторые ошибки в консоли.

Как можноЯ заставляю компонент ждать, пока данные загрузятся?

Answer 1

Сделайте метод возврата Observable или используйте сервис напрямую.

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

Создайте поле BehaviorSubject в компоненте.

shopingCart = new BehaviorSubject();

Поместите некоторые данные в ngOnInit:

shopingCart.next(this.getNewShoppingCart())

Использовать асинхронную трубу в точке компонента на shopingCart

Получите значение из BehaviorSubject, где вам это нужно, например:

shopingCart.getValue()

Answer 2

Вам необходимо добавить null / length check в компоненте.Например, если вы используете этот объект this.basket.boughtItems для получения данных от службы, добавьте условие ngIf в компонент, например * ngIf = "basket.boughtItems.length> 0"