html - 在ionic中切换到另一个段时图表消失了，如何解决这个问题？

Question

在ionic中切换到另一个段时图表消失了，如何解决这个问题？我是 ionic 新手

当我打开这个页面时它显示正常图表但是当我改变段并返回时，图表变得不可见，请解决这个问题
这是我的 HTML 代码

<ion-header>
  <ion-navbar  color="darkblue">
    <ion-title class = "header">Lead</ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top color="primary">
    <ion-segment [(ngModel)]="target" color="white">
        <ion-segment-button value="report">
            Report
        </ion-segment-button>
        <ion-segment-button value="graph">
            Graph
        </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div [ngSwitch]="target">

            <div *ngSwitchCase = "'report'" >
        <ion-card padding-top=10px>
          <ion-card-header>
              Bar Chart
          </ion-card-header>
                <ion-card-content>
                    <canvas #barCanvas></canvas>
                </ion-card-content>
        </ion-card>
            </div>


      <div *ngSwitchCase = "'graph'" >
        <ion-card padding-top=10px>
        <ion-card-header>Report</ion-card-header>
        <ion-card-content>

        </ion-card-content>
      </ion-card>
    </div>
  </div>
</ion-content>

这是我的 typescript 代码

这是我实现所有图表细节的 typescript 。

import { Component, ViewChild } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
    templateUrl: 'mytarget.html'
})

export class MyTarget {
    @ViewChild('barCanvas') barCanvas;

    barChart: any;
    target: any;

    constructor() {
        this.target = "report";
    }

    ionViewDidLoad() {

        this.barChart = new Chart(this.barCanvas.nativeElement, {

            type: 'bar',
            data: {
                labels: ["Target", "Achieved"],
                datasets: [{
                    label: ' of Students',
                    data: [10, 8],
                    backgroundColor: [
                        // 'rgba(255, 99, 132, 0.2)',
                        // 'rgba(54, 162, 235, 0.2)'
                        'rgba(255,0,0,0.3)',
                        'rgba(0,255,0,0.3)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: false,

                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }

        });
    }
}

Answer 1

如果您无法解决这个问题，我在使用 ion-segment 时遇到了同样的问题，我可以通过将 ngSwitch 替换为 [hidden]< 来解决它/em> 属性。

问题是 Canvas 只渲染一次。一旦您在段之间切换， Canvas 也会丢失，唯一的解决方案是在段之间切换时隐藏您的段

将您的 HTML 代码的 ion-content 部分编辑为下面的代码，您应该没问题

<ion-content>
  <div [hidden] = "target != 'report'" >
    <ion-card padding-top=10px>
      <ion-card-header>Bar Chart</ion-card-header>
        <ion-card-content>
          <canvas #barCanvas></canvas>
        </ion-card-content>
    </ion-card>
  </div>
  <div  [hidden] = "target != 'graph'" >
    <ion-card padding-top=10px>
    <ion-card-header>Report</ion-card-header>
    <ion-card-content>    </ion-card-content>      
  </div>
</ion-content>

这应该可以解决问题。但是，我不确定 [hidden] 属性在 div 上是否可用，如果没有，请删除 div 并将 [hidden] 属性放在 ionic 卡