ionische 3 eckige chartjs leinwand verschwindet auf zeigen ausblenden

Question

ich habe eine ionische 3 eckige app und mit chart.js, um ein donut-diagramm zu zeigen. Nothing Advance nur ein einfaches Donut-Diagramm mit grundlegenden Daten. Das Diagramm wird wie folgt gerendert:

<canvas #doughnutCanvas></canvas> 

Es kommt gut. Jetzt fängt das Problem an, als ich eine Showblende des Ionenkarteninhalts hinzufügte, um die Ansicht umzudrehen. Die Umsetzung sieht aus wie folgt:

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

zeigen, wenn ich einen Knopf drücken i die von false auf true die Ansicht, die Änderungen als Folge erweitert ändern und zeigt eine Liste. Wenn ich jedoch die Taste erneut drücke, um den Wert von "wahr" auf "falsch" umzuschalten, wird das Diagramm nicht gerendert. nur ein leerer Ionen-Karten-Inhalt. Da andere Inhalte auf der Diagrammseite in Ordnung sind, hat dies nur etwas mit chartjs zu tun. Bitte beraten Sie

Answer 1

Dies sollte funktionieren:

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

Answer 2

Das Problem ist, dass das Diagramm nicht neu gerendert wird, wenn die Leinwand erstellt und ngIf vollständig entfernt/fügt die Dom.

Entweder ändern Sie Ihren ngIf zu [hidden]oder Satz chart.js das Diagramm, wenn expanded Änderungen von false auf true neu zu machen.

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