切换标签后，离子段不显示数据

I'm having trouble displaying charts after switching from segments. I currently have 2 segments, index and edit. On the index I successfully display a chart with Chart.js.

从段切换后我无法显示图表。我目前有2个段，索引和编辑。在索引上我成功显示了Chart.js的图表。

Code for the chart:

图表代码：

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"
            ]
          }]
      }
    })
 }

And calling the function:

并调用函数：

ionViewDidEnter() {
  this.diagram();
}

Now on the page it's initial view the diagram loads successfully and results in a beautiful doughnut. The problem is after I click a segment and then come back to the initial page (with the diagram). Now the chart is gone. I still see it in the HTML but it just does not render in the view.

现在在页面上，它是初始视图，图表加载成功，并产生一个美丽的甜甜圈。问题是在我单击一个段然后返回到初始页面（带有图表）之后。现在图表已经消失了。我仍然在HTML中看到它，但它只是在视图中不呈现。

Code in the view:

视图中的代码：

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

Hopefully someone is able to locate the problem and help me out, thanks!

希望有人能够找到问题并帮助我，谢谢！

UPDATE

UPDATE

The Canvas with it's chart is not in the HTML. On it's initial load I see the following (which is correct):

带有图表的Canvas不在HTML中。在它的初始加载我看到以下（这是正确的）：

And after switching to another segment and back to the one which should render the chart (incorrect):

切换到另一个段并返回到应该呈现图表的段（不正确）之后：

So somehow after switching from segments the Chart is not correctly being initialized.

因此，在从段切换后，图表未正确初始化。

1 个解决方案

#1

Try this in the chart's ion-card:

在图表的离子卡中试试这个：

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