javascript - ionic 3 angular chartjs Canvas 在显示隐藏时消失

Question

我有一个 ionic 3 angular 应用程序并使用 chart.js 来显示圆环图。没有任何进展只是一个带有基本数据的简单圆环图。图表使用 Canvas 以标准方式呈现，如下所示:

<canvas #doughnutCanvas></canvas>

一切顺利。现在，当我添加 ion-card-content 的显示隐藏以翻转 View 时，问题就开始了。实现如下所示:

  <ion-card-content  *ngIf="expanded == false" style="padding-bottom:0">
      <ion-row no-padding>
          <ion-col col-auto no-padding>
              <canvas #doughnutCanvas></canvas>
          </ion-col>
      </ion-row>
  </ion-card-content>
  <ion-card-content  *ngIf="expanded == true" style="padding-bottom:0">
      <ion-list>
          ....
      </ion-list>
  </ion-card-content>

显示，当我点击一个按钮时，我将展开的内容从 false 更改为 true，结果 View 发生变化并显示一个列表。但是，当我再次按下按钮将值从 true 切换为 false 时，图表不会呈现。只是一个空白的 ionic 卡内容。由于图表页面上的其他内容很好，所以这仅与 chartjs 有关。请指教

Answer 1

问题是图表在创建 Canvas 时不会重新呈现 ngIf完全删除/添加 dom。

要么改变你的ngIf至 [hidden] 或 设置 chart.js 在 expanded 时重新呈现图表从 false 变为 true。

  <ion-card-content  [hidden]="expanded == false" style="padding-bottom:0">
                    <ion-row no-padding>
                      <ion-col col-auto no-padding>
                        <canvas #doughnutCanvas></canvas>
                     </ion-col>
                     </ion-row>
   </ion-card-content>