将ng2-charts与加载程序和AfterViewInit一起使用

Question

我有一个包含一些图表的网页，现在我正在尝试创建一个非常简单的加载器：

<div *ngIf="loading === true; else elseBlock" class="container">
  <div class="grid-pulse la-3x">
  </div>
</div>
<ng-template #elseBlock>
  <ng-content></ng-content>
</ng-template>  

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LoaderComponent {

  @Input() loading = true;
}

仅在标志为true时在组件和加载器之间交换，而在标志为false时仅在组件之间交换。

现在我实现了一些像这样的图表：

<app-loader [loading]="loading">
  <canvas
    baseChart
    #canvas
    [labels]="chartLabels"
    [datasets]="chartData"
    [options]="chartOptions"
    [chartType]="chartType">
  </canvas>
</app-loader>

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-component',
  // ... the other stuff, scss, html
})
export class MyComponent implements OnInit {

  loading = true;
  // more
  // data
  // ....

  ngOnInit(){
    this.httpService.get('/something').subscribe(data => {
      //do something with the data
      this.loading = false; //set loader to false.
    });
  }


}

效果很好，我的loading变量取决于我执行的http请求，然后将变量更改为false，因此出现了chart。

问题是，当我将变量更改为false时，它开始安装该组件，但是我已经停止显示加载器了...。因此，在显示图表时，我看到一个空白。

所以问题是：如何检查图表是否已经安装和创建？因为我不想显示空白（我将在组件开始渲染时在顶部显示一个伪造的加载器，有关如何实现的任何想法？）

[我读到以某种方式可以用AfterViewInit完成此操作，但是我可以使用不是由我创建的组件来访问该信息（在这种情况下）

Answer 1

我能想到的唯一逻辑原因-如果实际使用的是forEach循环，则在将数据实际处理并传递到数组之前，将加载变量更改为true，请考虑使用await或简单的for循环。