использовать ng2-диаграммы с загрузчиком и AfterViewInit - PullRequest
Новая
       10

использовать ng2-диаграммы с загрузчиком и AfterViewInit

1 голос
/ 03 февраля 2020

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

<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, она начинает монтировать компонент, но я уже перестала показывать загрузчик .... поэтому я вижу пустое пространство, когда появляется диаграмма.

поэтому вопрос: как я могу проверить, была ли диаграмма уже смонтирована и создана? потому что я не хочу показывать этот пробел (я покажу фальшивый загрузчик сверху, пока компонент начинает рендеринг, любые идеи о том, как это сделать sh?)

Я прочел это как-то sh это с AfterViewInit, но могу ли я получить доступ к этой информации с помощью компонента, который не создан мной (в данном случае)

1 Ответ

0 голосов
/ 03 февраля 2020

Единственная логическая причина, о которой я могу подумать - вы изменяете переменную загрузки на true, прежде чем данные будут фактически обработаны и переданы в массив, если вы используете forEach l oop, рассмотрите возможность использования await или простого for л oop.

...