Angular mat-tabs вызывает странную загрузку ng2-графиков

Question

В настоящее время у меня есть приложение с 3 вкладками, каждая вкладка содержит свой график ng2-диаграмм. Я заметил, что когда я переключаюсь с первой на вторую вкладку, содержимое кажется пустым в течение секунды или 2, прежде чем график просто всплывает. Сначала я думал, что это связано с анимацией, но поскольку анимации на вкладке по умолчанию работают, я сомневаюсь, что это является причиной. Я думаю, это также замечательно, что это происходит только при первом переключении вкладок. Когда я переключаюсь на предыдущую вкладку, а затем снова на другую вкладку, она не ведет себя ненормально.

    <mat-tab-group dynamicHeight>
      <mat-tab label="Evolution">
        <h4>Evolution of {{ result.groupName}}</h4>
        <br />
        <mat-form-field style="width:30%">
          <mat-label>Select a timespan</mat-label>
          <mat-select [(value)]="selected" (selectionChange)="spanChange()">
            <mat-option value="quarter">Show by quarter</mat-option>
            <mat-option value="semester">Show by Semester</mat-option>
            <mat-option value="year">Show by year</mat-option>
          </mat-select>
        </mat-form-field>
        <button mat-button mat-raised-button color="primary" (click)="randomize()" style="float:right">Change
          Mode</button>
        <div style="display: block">
          <canvas id="canv" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
            [legend]="barChartLegend" [chartType]="barChartType"></canvas>
        </div>
      </mat-tab>
      <mat-tab label="Categorial">
        <h4>Category scores of {{ result.groupName}}</h4>
        <br>
            <div style="display: block">
              <canvas baseChart [datasets]="radarChartData" [options]="radarChartOptions" [labels]="radarChartLabels"
                [chartType]="radarChartType">
              </canvas>
            </div>
      </mat-tab>
      <mat-tab label="Table"> Table </mat-tab>
    </mat-tab-group>

Данные инициализируются в методе OnInit, а диаграммы используют свойства по умолчанию, как в документация

 public barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{}],
      yAxes: [
        {
          ticks: {
            max: 100,
            beginAtZero: true
          }
        }
      ]
    }
  };
  public barChartLabels: Label[];
  public barChartType: ChartType = 'bar';
  public barChartLegend = true;
  public barChartData: ChartDataSets[] = [];
  newCategoryResults: any;


  public radarChartOptions: RadialChartOptions = {
    responsive: true,
    scale: {
      ticks: {
        beginAtZero: true,
        max: 5,
        stepSize: 1
      }
    }
  };

  //... Other functions
  ngOnInit() {
    this.route.data.subscribe(item => {
      this.result = item.groupresult;
      this.spanChange();
      this.createGroupCategoryScores();
    });
    let labels = this.newCategoryResults.map(x => x.title);
    let chartData = this.newCategoryResults.map(x => x.scoreOn5);
    this.radarChartLabels = labels;
    this.radarChartData = [{ data: chartData, label: name }];
  }

  createGroupCategoryScores() {
    // * Average of categScore
    const categRes = this.result.employeeResults.map(x => x.categoryResults);
    const categScoreEach = categRes.map(x => x.map(y => y.score));
    const streamlinedCategScore = [];
    for (let i = 0; i < categScoreEach[0].length; i++) {
      let num = 0;
      for (let i2 = 0; i2 < categScoreEach.length; i2++) {
        num += categScoreEach[i2][i];
      }
      streamlinedCategScore.push(Math.round(num / categScoreEach.length));
    }

    // * Average of categScoreOn5
    const categScoreOn5 = categRes.map(x => x.map(y => Number(y.scoreOn5)));
    let streamlinedCategScoreOn5 = [];
    for (let i = 0; i < categScoreOn5[0].length; i++) {
      let num = 0;
      for (let i2 = 0; i2 < categScoreOn5.length; i2++) {
        num += categScoreOn5[i2][i];
      }
      streamlinedCategScoreOn5.push(Math.round(num / categScoreOn5.length));
    }

    // * New CategoryResults
    let newCategoryResults = [];
    categRes[0].forEach(c => {
      let cate = new CategoryResult();
      cate.title = c.title;
      cate.score = streamlinedCategScore[categRes[0].indexOf(c)];
      cate.description = c.description;
      cate.id = categRes[0].indexOf(c).toString();
      cate.scoreOn5 = streamlinedCategScoreOn5[categRes[0].indexOf(c)];

      newCategoryResults.push(cate);
    });
    this.newCategoryResults =  newCategoryResults;
  }