在 Angular 中使用 *ngIf 的 Google 图表

问：

我正在构建一个使用谷歌图表的 Angular 应用程序。遇到一些似乎与异步有关的问题

我的HTML代码是：

<i class='bx bx-line-chart chart-icon' (click)="changeGraph('line')"></i>
<i class='bx bx-pie-chart chart-icon' (click)="changeGraph('pie')"></i>
<i class='bx bx-bar-chart chart-icon' (click)="changeGraph('bar')"></i>

<ng-container *ngIf="lineChart">
    <div id="curve_chart"></div>
</ng-container>

<ng-container *ngIf="pieChart">
    <div id="piechart"></div>
</ng-container>

<ng-container *ngIf="barChart">
    <div id="columnchart_material"></div>
</ng-container>

在 component.ts 中，changeGraph（） 方法是：

changeGraph(chart: string) {

    this.pieChart = chart === 'pie';
    this.lineChart = chart === 'line';
    this.barChart = chart === 'bar';


    google.charts.load('current', {'packages':['corechart', 'bar']});
    google.charts.setOnLoadCallback(() => {
      if(this.pieChart) {
        drawPieChart();
      } else if (this.barChart) {
        drawBarChart();
      } else {
        drawLineChart();
      }
    });
    

    function drawPieChart () {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
      ]);

      var options = {};

      var chartElement = document.getElementById('piechart');
      if (chartElement !== null) {
        var chart = new google.visualization.PieChart(chartElement);
        chart.draw(data, options);
      }
    }


    function drawBarChart () {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses', 'Profit'],
        ['2014', 1000, 400, 200],
        ['2015', 1170, 460, 250],
        ['2016', 660, 1120, 300],
        ['2017', 1030, 540, 350]
      ]);

      var options: google.visualization.ColumnChartOptions = {
        legend: { position: 'none' }
      };

      var chartElement = document.getElementById('columnchart_material');
      if (chartElement !== null) {
        var chart = new google.visualization.ColumnChart(chartElement);
        chart.draw(data, options);
      }
    }


    function drawLineChart () {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]
      ]);

      var options: google.visualization.LineChartOptions = {
        curveType: 'function'
      };

      var chartElement = document.getElementById('curve_chart');
      if (chartElement !== null) {
        var chart = new google.visualization.LineChart(chartElement);
        chart.draw(data, options);
      }
    }
}

我面临的问题是，只有当我点击两次时，图表才可见！<i>

如何确保单击一次时，应调用该方法并且图表应出现在 HTML 屏幕上？<i></i>changeChart()