将 ng2-charts 与 loader 和 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;
}

仅在标志为真时在组件和加载器之间交换，在标志为假时才在组件之间交换。

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

<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方式完成此操作是使用AfterViewInit但我可以使用不是由我创建的组件访问该信息（在这种情况下）

Answer 1

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