angular - Ionic2:在ion-segment内使用chartjs

Question

我正在尝试将图表放置在ion-segment内。第一次加载页面时， Canvas 将显示在选定的段上。但是当我单击其他片段时，我收到此错误:

Cannot read property 'nativeElement' of undefined

我可以在canvas内看到一个空白的html标签，并且实际的chartjs iframe未被复制。我尝试了很多选择但找不到解决方案。还有其他选择可以使这项工作有效吗？请帮忙

我的ts代码:

// On entering it works without issue as the element is now available
ionViewDidEnter(){
        let c = this.canvas.nativeElement;
        this.set1(c);            
    }
 //Switch case executes and error is thrown on any other segment is placed
 switch (level) {
            case "0":
                let c = this.canvas.nativeElement;
                this.set1(c); 
                break;
            case "1":
                let c1 = this.canvas1.nativeElement;
                this.set2(c1);
                break;
            case "2":
                let c2 = this.canvas2.nativeElement;
                this.set3(c2);
                break;
        }

我的 HTML:

<div *ngSwitchCase="'easy'">
      <canvas #canvas></canvas>
</div>
<div *ngSwitchCase="'medium'">
     <canvas #canvas1></canvas>
</div>
<div *ngSwitchCase="'hard'">
     <canvas #canvas2></canvas>
</div>

Answer 1

我在 ion-segment 中使用 Chart.js 时遇到了同样的问题，并通过使用 [hidden] 指令解决了这个问题，例如

 <canvas #canvas1 [hidden]="selectedValue!=1"></canvas>
 <canvas #canvas2 [hidden]="selectedValue!=2"></canvas>
 <canvas #canvas3 [hidden]="selectedValue!=3"></canvas>