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 App返回了此信息 error

我在做什么错了？

Answer 1

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

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";
 }
}

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

2 个答案: