タブを切り替えた後にイオンセグメントがデータを表示しない

Question

segmentsから切り替えた後にチャートを表示できません。 私は現在2つのセグメント、インデックスと編集を持っています。インデックスには、Chart.jsのグラフが正常に表示されます。チャートの

コード：

diagram = function() { 
    var finished = 0; 
    var pending = 0; 

    for (var i = 0; i < this.goal.activities.length; i++) { 
     var current = this.goal.activities[i]; 
     if (current.completed == true) { finished++ } else { pending++ } 
    } 
    this.piChart = new Chart(this.piCanvas.nativeElement, { 
     type: 'doughnut', 
     data: { 
      labels: ["finished activities", "pending activities"], 
      datasets: [{ 
      label: '# of Votes', 
      data: [ 
       finished 
       , 
       pending 
      ], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)' 
      ], 
      hoverBackgroundColor: [ 
       "#FF6384", 
       "#36A2EB" 
      ] 
      }] 
     } 
    }) 
} 

そして関数を呼び出す：

ionViewDidEnter() { 
    this.diagram(); 
} 

は今ページには、図の首尾負荷と美しいドーナツでの結果最初のビューです。問題は、セグメントをクリックしてから、最初のページに戻ったときです（図とともに）。今すぐチャートがなくなった。私はまだHTMLでそれを参照してくださいが、それは表示されません。ビュー内の

コード：

<ion-header> 
    <ion-navbar color="primary"> 
    <ion-title>{{ goal.title }}</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-segment [(ngModel)]="goalTab"> 
    <ion-segment-button value="progress"> 
     Progress 
    </ion-segment-button> 
    <ion-segment-button value="activities"> 
     Actitivies 
    </ion-segment-button> 
    </ion-segment> 

    <div [ngSwitch]="goalTab"> 
    <ion-card *ngSwitchCase="'progress'"> 
     <ion-card-header> 
     Overview of activities for: {{ goal.title }} 
     </ion-card-header> 
     <ion-card-content> 
     <canvas #piCanvas></canvas> 
     </ion-card-content> 
    </ion-card> 

    <ion-list *ngSwitchCase="'activities'"> 
     <ion-item> 
     <ion-card-header> 
      Something other segment 
     </ion-card-header> 
     </ion-item> 
    </ion-list> 
    </div> 
</ion-content> 

うまくいけば、誰かが、おかげで問題を見つけて、私を助けることができるです！

UPDATE

キャンバスそれはチャートだとHTMLではありません。それは初期の負荷だ上で、私は（正しい）、以下を参照してください。切り替えた後

だから、何とか：

と（間違った）チャートを描画する必要のあるものに戻って別のセグメントに切り替えて、後 セグメントから、チャートが正しく初期化されていません。

Answer 1

は、チャートのイオンカードでこれを試してください：あなたの応答のための

<ion-card [style.display]="goalTab == 'progress' ? 'block' : 'none'"> 
     <ion-card-header> 
     Overview of activities for: {{ goal.title }} 
     </ion-card-header> 
     <ion-card-content> 
     <canvas #piCanvas></canvas> 
     </ion-card-content> 
    </ion-card>