將 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 循環。