Массив по индексу, возвращающий undefined в Angular ngAfterViewInit

Используя Angular 7 и .NET Core 2.2, я работаю над финансовым приложением и списком наблюдения для него. Символы добавляются (и сохраняются в базе данных). Когда компонент списка наблюдения загружается, в ngOnInit я получаю данные, полученные от моего резолвера через маршрутизатор. Затем я вызываю функцию, которая берет массив, перебирает его и возвращает другой набор данных из источника финансовых данных. Затем я помещаю каждый из этих возвращенных элементов из Observable в локальный массив watchListItems: IEXStockPrice[];.

Мой код:

ngOnInit() {
    this.router.data.subscribe(data => {
      this.watchListItemsFromDb = data['watchListItems'];
      if (this.watchListItemsFromDb) {
        this.fetchLatestPriceforWatchListItemsFromIEX(this.watchListItemsFromDb);
      }
    });
  }

  ngAfterViewInit(): void {
    console.info(this.watchListItems);
    console.info(this.watchListItems[0]);
  }

  fetchLatestPriceforWatchListItemsFromIEX(items: WatchListItemFromNet[]) {
    if (!this.watchListItems) {
      this.watchListItems = [];
    }

    items.forEach(element => {
      this.iex.getStockQuoteBySymbol(element.symbol)
        .subscribe(
          (iexData: IEXStockPrice) => {
            this.watchListItems.push(iexData);
          },
          (err: any) => this.alertify.error('Could not get the latest data from IEX.')
        );
    });
  }

Теперь у меня есть дочерний компонент LineChartComponent, которому нужно создать линейную диаграмму/график активного элемента списка наблюдения. Я просто собирался сначала загрузить компонент диаграммы с первым элементом в массиве watchListItems. Я не могу получить к нему доступ на ngOnInit, так как компонент не завершил инициализацию.

Я пробовал ngAfterViewInit.

Однако, как вы можете видеть на картинке, в watchListItems есть контент, но попытка доступа к первому элементу возвращает undefined.