导航回组件时,我需要更新一个甜甜圈图,但目前还没有。
renderChart(oplTitle, oplScore, oplScoreDifference) {
this.options = {
type: 'doughnut',
data: {
labels: ["Opl progress", ""],
datasets: [{
borderWidth: 0,
data: [oplScore, oplScoreDifference],
backgroundColor: [
'rgba(250, 203, 27, 0.9)',
'rgba(255, 255, 255, 1)'
],
borderColor: [
'rgba(250, 203, 27, 1)',
'rgba(250, 203, 27, 1)'
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: oplTitle,
position: 'bottom'
},
tooltips: {
enabled: false,
backgroundColor: 'rgba(250, 203, 27, 1)'
},
legend: {
display: false,
labels: {
boxWidth: 20
}
}
}
}
}
我在页面加载时调用renderChart
ionViewDidLoad() {
this.renderChart(this.title, this.score, this.difference);
}
在HTML
<chart [options]="options"></chart>
图表目前处于渲染状态,但是当导航并更新值时,返回页面时不会刷新。我如何“刷新”
问题是因为,就像您在文档中看到的那样,该ionViewDidLoad
事件...
页面加载后运行。每创建一个页面此事件仅发生一次。如果页面离开但已被缓存,则此事件将不会在后续查看中再次触发。ionViewDidLoad事件是放置页面设置代码的好地方。
并且由于页面被缓存,因此事件仅被执行一次(创建页面时)。改用ionViewDidEnter
page事件,因为它...
当页面已完全进入并且现在是活动页面时运行。无论是第一次加载还是缓存的页面,都会触发此事件。
您可以在此处找到更多信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句