canvas元素

Question

我正在使用我的离子2应用程序中的chart.js，如果我使用ngSwitch条件实现canvas元素以使其正常工作但是当我使用条件时我得到错误，未定义本机元素因此canvas元素未呈现因为canvas元素在订阅图表数据时没有准备好。我怎么能解决这个问题呢。

  @ViewChild('todayChart') todayChart;
 @ViewChild('yesterdayChart') yesterdayChart;

ionViewWillEnter() {

     this.homeauth.todaychart().subscribe((table) => {
         var labels = [], datay = [], datum = [], timestamp = [];
         for (var i = 0; i <= table.length - 1; i++) {
             datum.push(table[i].chartdate);
             labels.push(table[i].z10s3);
             datay.push(table[i].z10s6);
             timestamp.push(table[i].timestamp);
         }

         this.heutechart = new Chart(this.todayChart.nativeElement, {
             type: 'line',
             data: {
                 xLabels: labels,
                 datasets: [
                     {
                         label: 'G.Oil', fill: true, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)",
                         pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: datay, spanGaps: false,
                     }
                 ],

             },
         });
     });

     this.homeauth.yesterdaychart().subscribe((table) => {
         var labels = [], datay = [], datum = [];
         for (var i = 0; i <= table.length - 1; i++) {
             datum.push(table[i].chartdate);
             labels.push(table[i].z10s3);
             datay.push(table[i].z10s6);
         }

         this.vortagschart = new Chart(this.yesterdayChart.nativeElement, {

             type: 'line',
             data: {
                 xLabels: labels,
                 datasets: [
                     {
                         label: 'G.Oil', fill: true, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)",
                         pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: datay, spanGaps: false,
                     }
                 ],

             }
         });
     });


 } 

html:

 <ion-segment [(ngModel)]="category">
    <ion-segment-button value="today"> 24h </ion-segment-button>
    <ion-segment-button value="yesterday"> 48h </ion-segment-button>
</ion-segment>

<div [ngSwitch]="category">
  <div *ngSwitchCase="'today'">
    <canvas #yesterdayChart> </canvas>
  </div>
</div>

<div [ngSwitch]="category">
  <div *ngSwitchCase="'yesterday'">
    <canvas #todayChart></canvas> 
  </div>
</div>

Answer 1

您不必为每个案例使用ng-switch 。

它应该是这样的：

<div [ngSwitch]="category">
  <div *ngSwitchCase="'today'"> <!-- case 1 -->
    <canvas #yesterdayChart> </canvas>
  </div>
  <div *ngSwitchCase="'yesterday'">
    <canvas #todayChart></canvas> <!-- case 2 -->
  </div>
</div>

添加组件中的条件，因为DOM中只有其中一个元素存在。

if(this.todayChart){
  this.heutechart = new Chart(this.todayChart.nativeElement, {
             type: 'line',
             data: {
                 xLabels: labels,
                 datasets: [
                     {
                         label: 'G.Oil', fill: true, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)",
                         pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: datay, spanGaps: false,
                     }
                 ],

             },
         });
     });
  }
 //Similarly for yesterdayChart