离子 3："未定义字符串"将变量绑定到离子图标时出错

Question

>在将 Ionic 图标绑定到变量时，我查看了其他示例和建议，但我不断收到错误消息，指出"字符串未定义"来自以下内容：

.html：

<ion-item class="card">
<ion-icon [name]="myIcon"></ion-icon>
<button ion-item id="startBtn"></button>
</ion-item>

每当我运行某个功能时，我都会尝试更改图标

TS：

export class HomePage {
constructor(public navCtrl: NavController) {
}    
ionViewDidLoad() {
var time = {
hours: 0,
minutes: 0,
seconds: 0,
cseconds: 0,
running: false,
start: -1
}
var myButton = document.querySelector('#startBtn')
myButton.addEventListener('click', setToggleButton)

function setToggleButton() {
if (time.running === false) {
console.log('changing the icon');
myIcon: string = "play";
}
else {
console.log('changing the icon');
myIcon: string = "stop";
}
}    

根据我的理解，这应该有效，但我的 Ionic 应用程序返回此 错误

我做错了什么？

Answer 1

你需要在构造函数上方定义变量myIcon

我的图标：字符串;

并在下面像这样使用它.myIcon = "yourIcon">

Answer 2

感谢您的上述建议。我能够通过额外的步骤解决它。

首先，我必须按照上面的建议声明构造函数：

myIcon: String;

然后在ionViewDidLoad((中添加：

var that = this;

最终代码如下所示

export class HomePage {
myIcon: String;
constructor(public navCtrl: 
NavController) {
}    
ionViewDidLoad() {
var that = this;
var time = {
hours: 0,
minutes: 0,
seconds: 0,
cseconds: 0,
running: false,
start: -1
}
var myButton = 
document.querySelector('#startBtn')
myButton.addEventListener('click', 
setToggleButton)
function setToggleButton() {
if (time.running === false) {
console.log('changing the icon');
that.myIcon = "play";
}
else {
console.log('changing the icon');
that.myIcon = "stop";
}
}