Question

我正在使用离子3角应用程序并使用chart.js显示圆环图。没有任何东西只是提供基本数据的简单圆环图。该图表使用canvas以标准方式呈现，如下所示：

<canvas #doughnutCanvas></canvas>

很好。现在问题开始了，当我添加一个显示隐藏的离子卡内容来翻转视图。实现如下所示：

  <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，因此视图会更改并显示列表。但是，当我再次按下按钮以将值从true切换为false时，图表不会呈现。只是一个空白的离子卡内容。由于图表页面上的其他内容很好，所以这只与chartjs有关。请指教

Answer 1

问题是图表在创建的画布和ngIf完全删除/添加dom时无法重新渲染。

当ngIf从false更改为true时，将[hidden]更改为expanded 或设置chart.js以重新呈现图表。

  <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>

Answer 2

这应该有效：

<ion-card-content   [hidden]="expanded" 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  [hidden]="!expanded" style="padding-bottom:0">
                   <ion-list>
                            ....
                    </ion-list>
   </ion-card-content>

离子3角度chartjs帆布消失在秀隐藏

2 个答案: