NG2-Charts 仅在刷新页面后显示

Question

我正在做一个 Angular 项目，我正在使用 Angular 11。

我的问题是ng2-charts。简而言之，对后端进行 api-request 调用以使用数据填充图表。

我想我知道问题出在哪里，但不知道如何解决：

模板（即图表）在没有任何数据的情况下被初始化。所以在调用 api 加载数据时模板已经存在，这使得图表本身为空白。当我刷新数据已经存在并且数据按预期加载时。

如你所见，

export class ChartComponent implements OnInit, OnDestroy {

  public doughnutChartLabels: Label[] = [];
  public doughnutChartData: MultiDataSet = [
    []
  ];
  public doughutColors: any[] = [];
  public pieChartColors: Array <any> = [{
    backgroundColor: []
  }];
  public doughnutChartType: ChartType = 'doughnut';
  private subscriptions: Subscription[] = [];
  public loaded: boolean = false;

  constructor(private pLanguageService: PLanguageService,
              private analyticsService: AnalyticsService,
              private subscriptionService: SubscriptionService,
              public changeDetector: ChangeDetectorRef) {}

  ngOnDestroy(): void {
    this.subscriptionService.unsubscribeParam(this.subscriptions);
  }

  ngOnInit(): void {
    this.initData();
  }

  private initData(): void {
    const subscription: Subscription = this.pLanguageService
      .findAll()
      .pipe(switchMap((pLanguage: Planguage[]) => {
        return this.analyticsService.getUsageStatisticsOfPLanguages();
      }))
      .subscribe((data: UsageStatistics) => {
        this.initChart(data);
      });
    this.subscriptions.push(subscription);
  }

  private initChart(statistics: UsageStatistics): void {
    this.initUsagePercentages(statistics);
    this.visualizeChart();
    console.log("initialization done");
  }

  private visualizeChart(): void {
    this.pieChartColors = [{backgroundColor: this.doughutColors}];
    this.loaded = true;
  }

  private initUsagePercentages(statistics: UsageStatistics): void {
    for(let i = 0; i < statistics.planguages.length; i++) {
      this.doughnutChartLabels.push(statistics.planguages[i].language);
      this.doughnutChartData[0].push(statistics.numberSubmissions[i]);
      this.doughutColors.push(`${statistics.planguages[i].color}`);
    }
  }
}

这是我的这个组件的模板

<ng-container *ngIf="loaded">
  <div id="chart">
    <div class="card shadow mb-4">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h4 style="margin-bottom: 4px;margin-top: 4px;">Language use distribution</h4>
      </div>
      <div class="card-body">
        <div class="chart-area">
          <div style="display: block;">
            <canvas baseChart
                    [data]="doughnutChartData"
                    [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType"
                    [colors]="pieChartColors">
            </canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>

所以我现在正在尝试的是在数据可用之前阻止模板“加载” - 但这不起作用。

我的目标是在不刷新整个窗口的情况下更新图表（或刷新组件）。有什么帮助吗？

Answer 1

你操作的是同一个对象，这就是为什么 Angular 不再更新组件了。

this.doughnutChartData[0].push(statistics.numberSubmissions[i]);

这里的简单技巧是将对象分配给新的引用：

for(let i = 0; i < statistics.planguages.length; i++) {
      this.doughnutChartLabels.push(statistics.planguages[i].language);
      this.doughnutChartData[0].push(statistics.numberSubmissions[i]);
      this.doughutColors.push(`${statistics.planguages[i].color}`);
    }

到：

   for(let i = 0; i < statistics.planguages.length; i++) {          
          ...
        }
   this.doughnutChartLabels = [...this.doughnutChartLabels];
   this.doughnutChartData= [...this.doughnutChartData];