javascript - 将 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 ，因此我的图表出现。

问题是，当我将变量更改为 false 时，它​​开始安装组件，但我已经停止显示加载程序......因此，当图表出现时，我看到一个空白区域。

所以问题是:如何检查图表是否已安装并创建？因为我不想显示那个空白(当组件开始渲染时，我将在顶部显示一个假加载器，关于如何完成的任何想法？)

我读到可以通过 AfterViewInit 来完成此操作，但是我可以使用不是由我创建的组件访问该信息(在本例中)

Answer 1

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