Question

我使用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.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中包含内容，但是尝试访问第一个元素将返回undefined。

Answer 1

由于路由器以可观察的形式提供其数据，因此如果填充了fetchLatestPriceforWatchListItemsFromIEX()，我只会调用watchListItemsFromDb

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>

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

1 个答案: