切换选项卡后离子段不显示数据

Posted

技术标签:

【中文标题】切换选项卡后离子段不显示数据【英文标题】:ion-segments not displaying data after switching tabs 【发布时间】:2017-11-20 04:39:34 【问题描述】:

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

图表代码:

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

并调用函数:

ionViewDidEnter() 
  this.diagram();

现在页面上的初始视图是图表成功加载并生成了一个漂亮的甜甜圈。问题是在我单击一个段然后返回到初始页面(带有图表)之后。现在图表不见了。我仍然在 html 中看到它,但它只是没有在视图中呈现。

视图中的代码:

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

希望有人能够找到问题并帮助我,谢谢!

更新

带有图表的 Canvas 不在 HTML 中。在它的初始加载中,我看到以下内容(这是正确的):

在切换到另一段并返回应该呈现图表的段之后(不正确):

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

感谢您的回复。我喜欢你使用它的方式,但遗憾的是它还不起作用。我已经更新了我的问题,并在该问题上取得了一些进展。

以上是关于切换选项卡后离子段不显示数据的主要内容,如果未能解决你的问题,请参考以下文章

切换选项卡后 UI 会随 ObservableObject 发生变化

仅在键盘选项卡后获取焦点元素

离子切换按钮不显示正确的切换 - Ionic 3,Angular 4

Ionic 2:添加新的动态选项卡后刷新选项卡视图

离子显示网页

UIRefreshControl 在 UITabBarController 中切换选项卡后卡住