Angular 在页面上显示多个图表时出现问题

我在创建图表时遇到错误：无法从给定项目获取上下文，我认为这是因为在填充gamesArray之前调用了loadCharts函数，因此在模板上看不到id。但我不是100%

我尝试了Wait async，但不起作用，我尝试在游戏结束后调用此.loadCharts（）。我尝试过在游戏开始前不加载图表，但不管我怎么做，我似乎都无法让它工作

这是组件

import { Component, OnInit, AfterContentInit, AfterViewChecked, AfterViewInit } from '@angular/core';
import { _ } from 'underscore';
import { Chart } from 'chart.js';
import { GameService } from '../../services/games.service';

@Component({
  selector: 'app-sports-cards',
  templateUrl: './sports-cards.component.html',
  styleUrls: ['./sports-cards.component.scss']
})

export class SportsCardsComponent implements OnInit, AfterViewInit {
  currentPage = 1;
  chart: [];
  gamesArray = [];
  test = [];

  constructor(
    public games: GameService
  ) { }

  ngOnInit() {
    this.getGames();
  }

  async getGames() {
    const game = await this.games.getAllGames(this.currentPage);
    _.each(game.games, (gameData) => {
      this.gamesArray.push(gameData);
    });
    this.loadCharts(this.gamesArray);
  }

  ngAfterViewInit() {
    this.loadCharts(this.gamesArray);
  }

  onPageChange(pageData) {
    this.currentPage = pageData;
    this.games.getAllGames(this.currentPage).then(game => {
      console.log(this.currentPage);
      // this.gamesArray = game;
    });

  }

  loadCharts(gameData) {
    _.each(gameData, (games) => {
      console.log(games);
      console.log('hello');
      this.chart = new Chart(games.id, {
        type: 'doughnut',
      data: {
        labels: [games.homeTeam.teamName, games.awayTeam.teamName],
        datasets: [
          {
            label: games.homeTeam.teamName + ' Vs ' + games.awayTeam.teamName,
            backgroundColor: [games.homeTeam.schoolPrimaryColor, games.awayTeam.schoolSecondaryColor],
            data: [games.homeTeam.totalBets, games.awayTeam.totalBets]
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: games.homeTeam.teamName + ' Vs ' + games.awayTeam.teamName
        }
      }
      });
    });
  }
}

这是HTML：

<div class="col-lg-9 float-right" >
  <!-- <div *ngIf='loading'  class="d-flex justify-content-center">
    <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div>
  </div> -->
  <!-- <div *ngIf="!loading"> -->
      <div class="row">
          <div class="col-lg-6 card-background"
            *ngFor="let game of gamesArray"
          >
            <div class="card-surround shadow-sm">
              <div>
                  <h2>{{game.homeTeam.teamName}}</h2>
                  <h2>{{game.awayTeam.teamName}}</h2>
                  <canvas id="{{game.id}}"></canvas>
                  <hr>
                  <p>{{game.gameTime}}</p>
              </div>
            </div>
        </div>
      </div>
  <!-- </div> -->
  <ngb-pagination
  class="d-flex justify-content-end"
  [collectionSize]="gamesArray.length"
  [(page)]="currentPage"
  [maxSize]="5"
  [pageSize]='6'
  (pageChange)='onPageChange($event)'
  size="sm"
  [rotate]="true"
  [ellipses]="false"
  [boundaryLinks]="true"
  ></ngb-pagination>
</div>

{{game.homeTeam.teamName}
{{game.awayTeam.teamName}

{{game.gameTime}

创建图表失败给了我一个错误：无法从我正在创建的每个游戏的给定项目中获取上下文。游戏显示出来了，只是没有显示在图表上。

你几乎完成了：D
最好在

ngAfterViewInit（）

中执行与显示项相关的所有内容，以防止DOM错误。 因为有时候当你显示一些东西时，你的DOM并不存在

基于您的html模板，您有了微调器。 所以

显示微调器-

ngOninit（）

获取数据-

ngOninit（）

或

ngAfterViewInit（）

显示数据-

ngAfterViewInit（）

隐藏微调器-显示后

---

以下是有关

ngOninit（）

的更多信息：

首先显示数据绑定属性并设置指令/组件的输入属性后，初始化指令/组件。 在第一个ngOnChanges（）之后调用一次

因此，如果您有任何

@Input

decorator，

ngOninit（）

是从模板html获取它的时刻，而不是显示某些内容的时刻。正是检查属性的好时机。
另外，请提醒，构造函数不是angular生命周期的一部分。

---

请小心，

*ngIf

会破坏您的DOM，这不利于隐藏组件。

感谢您的帮助，我似乎仍然无法加载图表，但我想知道这是生命周期问题还是与阵列有关。但是，没有更多的错误，所以我想我可能会更接近。