Ionic 3ネイティブエレメントチャートを使用したアコーディオンリスト

Question

ユーザーがクリックするとアコーディオンリストを作成しようとしています。問題は、最初はチャートが表示されていますが、アコーディオンのリストを閉じると、再び開いても表示されません。だから基本的にアプリを開いて、チャートを表示し、アコーディオン要素をクリックし、グラフが消えて、アコーディオン要素をクリックすると、それは拡大するが、グラフは表示されない。私はそれが毎回表示されるように取得するにはどうすればよい

チャート-page.html

<ion-header> 
    <ion-navbar> 
    <ion-title>Health Summary</ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content padding> 
    <ion-list> 
    <ion-item padding (click)="toggleChartThisWeek(thisWeek)"> 
     This Week 
     <div *ngIf="thisWeek"> 
     <br> 
     <canvas #lineCanvas></canvas> 
     <br> 
     </div> 
    </ion-item> 
    </ion-list> 
</ion-content> 

チャートpage.ts

import { Component, ViewChild } from '@angular/core'; 
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; 
import { Chart } from 'chart.js'; 


@IonicPage() 
@Component({ 
    selector: 'page-chart-page', 
    templateUrl: 'chart-page.html', 
}) 
export class ChartPage { 


    @ViewChild('lineCanvas') lineCanvas; 
    lineChart: any; 
    chartLabels: any = ["January", "February", "March", "April", "May", "June", "July"]; 
    chartData: any = [65, 59, 80, 81, 56, 55, 40]; 
    thisWeek: any = true; 


    constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform) { 

    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad HealthSummaryPage'); 
     this.lineChart = new Chart(this.lineCanvas.nativeElement, { 

      type: 'line', 
      data: { 
       labels: this.chartLabels, 
       datasets: [ 
        { 
         label: "My First dataset", 
         fill: false, 
         lineTension: 0.1, 
         backgroundColor: "rgba(75,192,192,0.4)", 
         borderColor: "rgba(75,192,192,1)", 
         borderCapStyle: 'butt', 
         borderDash: [], 
         borderDashOffset: 0.0, 
         borderJoinStyle: 'miter', 
         pointBorderColor: "rgba(75,192,192,1)", 
         pointBackgroundColor: "#fff", 
         pointBorderWidth: 1, 
         pointHoverRadius: 5, 
         pointHoverBackgroundColor: "rgba(75,192,192,1)", 
         pointHoverBorderColor: "rgba(220,220,220,1)", 
         pointHoverBorderWidth: 2, 
         pointRadius: 1, 
         pointHitRadius: 10, 
         data: this.chartData, 
         spanGaps: false, 
        } 
       ] 
      } 

     }); 
    } 

    ionViewWillEnter() { 
    } 

    toggleChartThisWeek() { 
    if(this.thisWeek) { 
     this.thisWeek = false; 
    } else { 
     this.thisWeek = true; 
    } 
    } 
} 

？変数に変数を格納する必要がありますか？その場合、どのようにすればいいですか？

Answer 1

がうまくいけば、完全にテンプレートを再描画するために、角度強制的にそれ以下のコードをチェックしてください：

import { Component, ViewChild } from '@angular/core'; 
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular'; 
import { Chart } from 'chart.js'; 


@IonicPage() 
@Component({ 
    selector: 'page-chart-page', 
    templateUrl: 'chart-page.html', 
}) 
export class ChartPage { 


    @ViewChild('lineCanvas') lineCanvas; 
    lineChart: any; 
    chartLabels: any = ["January", "February", "March", "April", "May", "June", "July"]; 
    chartData: any = [65, 59, 80, 81, 56, 55, 40]; 
    thisWeek: any = true; 


    constructor(
     public navCtrl: NavController, 
     public navParams: NavParams, 
     public platform: Platform) { 

    } 

    ionViewDidEnter() { 
    console.log('ionViewDidEnter() HealthSummaryPage'); 
    } 

    drawChart(){ 
    if (! this.lineCanvas) { return; } 
    this.lineChart = new Chart(this.lineCanvas.nativeElement, { 
     type: 'line', 
     data: { 
      labels: this.chartLabels, 
      datasets: [ 
       { 
        label: "My First dataset", 
        fill: false, 
        lineTension: 0.1, 
        backgroundColor: "rgba(75,192,192,0.4)", 
        borderColor: "rgba(75,192,192,1)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 0.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(75,192,192,1)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 1, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(75,192,192,1)", 
        pointHoverBorderColor: "rgba(220,220,220,1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 1, 
        pointHitRadius: 10, 
        data: this.chartData, 
        spanGaps: false, 
       } 
      ] 
     } 
    }); 
} 

    toggleChartThisWeek() { 
    if(this.thisWeek) { 
     this.thisWeek = false; 
    } else { 
     this.thisWeek = true; 
     this.drawChart(); 
    } 
    } 
}