如何在加载图表之前等待数据被推入数组？

Question

我正在尝试在我的应用程序上显示一些图表，但它们当前未显示，因为我在加载后将它们需要的数据推送到数组中，因此为空图表。在尝试渲染我的图表之前，有什么方法可以等待数组？

我尝试过使用 async 和 await，但我不知道我是否做错了，或者在这种情况下它是否对我没有帮助。我尝试在 this.games.getAllGames() 函数的末尾加上 then ，然后在其中调用 loadCharts() 函数，但这也不起作用。

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);
    });
  }

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

Answer 1

在您的模板中使用*ngIf：

<canvas id="{{game.id}}" *ngIf="gamesArray.length"></canvas>

仅当数据在您的数组中时才会加载您的图表。

您的图表未加载，因为您的画布没有对您的组件的引用。而且您正在使用循环，所以我建议您使用 chartjs 包装器为 Angular。 https://www.npmjs.com/package/angular2-chartjs

Answer 2

您可以使用@ViewChild 来触发您的图表

例如，如果您在模板中有类似的东西

    <div class="col-lg-6 card-background"  *ngFor="let game of gamesArray;let i=index" >

        <canvas baseChart  [id]="i" [datasets]="ChartData" [labels]="ChartLabels" [options]="ChartOptions" [legend]="ChartLegend" [chartType]="ChartType" </canvas>

</div>

在 ViewModel 中你可以使用

  @ViewChild('#1') firstChartttt: BaseChart;  

您现在有了可以在检查后在此处分配数据的对象，并且在 angular 是双向绑定时无需重绘

注意：但不要忘记初始化图表数据