Javascript 索引处的数组在Angular ngAfterViewInit中返回未定义

使用Angular 7和.NETCore2.2，我正在开发一个金融应用程序和它的监视列表。符号被添加（并保存到数据库）。当watchlist组件加载时，在ngOnInit中，我通过路由器从解析器获取数据。然后我调用一个函数，该函数获取一个数组，循环遍历它们，并从财务数据源返回一个不同的数据集。然后，我将这些返回的项目中的每一个从Observable推送到本地数组

watchListItems:IEXStockPrice[]

我的代码是：

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

  ngAfterViewInit(): void {
    console.log(this.watchListItems);
    console.log(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中包含内容，但是尝试访问第一个元素会返回
未定义的

由于路由器将其数据作为可观察数据提供，因此只有在填充了
watchListItemsFromDb
的情况下，我才会调用
FetchlatestPriceForwardChListItemsFromiex（）

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

      if (this.watchListItemsFromDb) {
          this.fetchLatestPriceforWatchListItemsFromIEX(this.watchListItemsFromDb);
      }
    });
}

fetchLatestPriceforWatchListItemsFromIEX(items: WatchListItemFromNet[]) {

    // initialize your array here vs in the viewmodel
    if (!this.watchListItems) {
        this.watchListItems = [];
    }

    items.forEach(element => {
      this.iex.getStockBySymbol(element.symbol)
        .subscribe(
          (iexData: IEXStockPrice) => {
            this.watchListItems.push(iexData);
          },
          (err: any) => this.alertify.error('Could not load watchlist')
        );
    });
  }

然后在组件中，可以检查数组，然后将第一项作为@Input传递给子组件：

<ng-container *ngIf="watchListItemsFromDb">
  <child-component [data]="watchListItemsFromDb[0]"></child-component>
</ng-container>

由于路由器将其数据作为可观察数据提供，因此只有在填充了
watchListItemsFromDb
的情况下，我才会调用
fetchlatestPriceForwardChListItemsFromiex（）

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

      if (this.watchListItemsFromDb) {
          this.fetchLatestPriceforWatchListItemsFromIEX(this.watchListItemsFromDb);
      }
    });
}

fetchLatestPriceforWatchListItemsFromIEX(items: WatchListItemFromNet[]) {

    // initialize your array here vs in the viewmodel
    if (!this.watchListItems) {
        this.watchListItems = [];
    }

    items.forEach(element => {
      this.iex.getStockBySymbol(element.symbol)
        .subscribe(
          (iexData: IEXStockPrice) => {
            this.watchListItems.push(iexData);
          },
          (err: any) => this.alertify.error('Could not load watchlist')
        );
    });
  }

然后在组件中，可以检查数组，然后将第一项作为@Input传递给子组件：

<ng-container *ngIf="watchListItemsFromDb">
  <child-component [data]="watchListItemsFromDb[0]"></child-component>
</ng-container>


路由器数据是异步的。您需要调用
this.fetchlatestPriceForwardChListItemsFromiex（this.watchListItemsFromDb）
仅当this.watchListItemsFromDb

为truthythis.router.data.subscribe（data=>{this.watchListItemsFromDb=data['watchListItems']；this.fetchLatestPriceForwardChListItemsFromiex（this.watchListItemsFromDb）；}）；路由器数据是异步的。您需要调用

this.fetchlatestPriceForwardChListItemsFromiex（this.watchListItemsFromDb）

仅当this.watchListItemsFromDb为truthythis.router.data.subscribe（data=>{this.watchListItemsFromDb=data['watchListItems']；this.fetchLatestPriceForwardChListItemsFromiex（this.watchListItemsFromDb）；}）；我试过这个。控制台日志记录watchListItems[0]仍然返回undefined.Hmm。让我来看看StackBlitz会有什么帮助。它总是会返回truthy，因为我将watchListItems初始化为组件顶部的空数组。啊。在这种情况下，如果不预先初始化array.Hm，它应该可以工作。似乎没有。我必须在订阅之前对其进行初始化，因为我无法将任何内容“推”到未初始化的数组中。控制台日志记录watchListItems[0]仍然返回undefined.Hmm。让我来看看StackBlitz会有什么帮助。它总是会返回truthy，因为我将watchListItems初始化为组件顶部的空数组。啊。在这种情况下，如果不预先初始化array.Hm，它应该可以工作。似乎没有。我必须在订阅之前对其进行初始化，因为我不能将任何内容“推”到未初始化的数组中。