切换选项卡后离子段不显示数据
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 发生变化