切換標籤頁後不顯示數據的離子段

我在從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。在它的初始加載我看到以下（這是正確的）：

並切換到另段和返回一個應該呈現圖表（不正確）後：開機後

所以不知何故從圖表不正確被初始化。

來源

2017-06-17 Koen de Haan

試試這個在圖表的離子卡：

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

來源

2017-06-18 16:59:18

感謝您的答覆。我喜歡你的方式，但可悲的是它還沒有工作。我已經用我在問題上取得的進展更新了我的問題。 –

切換標籤頁後不顯示數據的離子段

回答

相關問題