时间戳

首页 > 解决方案 > 禁用后如何渲染 ng2 图表

angular - 禁用后如何渲染 ng2 图表

问题描述

我有一个禁用 onInit 的以下条形图

  <div style="display: block" *ngIf="showBar">
  <canvas baseChart height="75"
          [data]="barChartData"
          [labels]="barChartLabels"
          [chartType]="'bar'"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>

条形图.component.ts 文件：

export class BarGraphComponent implements OnInit {
showBar: boolean;
ngOnInit() {
this.showBar = false;
}

我想使用 switch 语句在 app.components.ts 文件中启用此图表（根据从前一个图表传递的内容进行更改）。但是在应用程序 component.ts 文件中，如果我这样做 this.showBar = true （使用发射器）它仍然不起作用。任何指导将不胜感激。

标签： angulartypescriptng2-charts

解决方案

今天早上解决了这个问题。而不是在 bar-graph.component.html 中声明 *ngIf。它应该在 app.component.html 中声明

<app-bar-graph *ngIf="showBarGraph" [config]="barConfig" (notify)="onNotify($event)"></app-bar-graph>

然后在 app.component.ts 里面

export class AppComponent implements OnInit {
showBarGraph: boolean;
... logic goes here ....
this.showBarGraph = true;

希望这对未来的人有所帮助

推荐阅读