Html 在ionic 2x中切换更改嵌套按钮颜色

我在每个列表中都指定了嵌套按钮。我想要实现的是，当单击某个特定按钮时，它的颜色应该会更改为不同的颜色，而当再次单击时，它的颜色应该恢复为默认颜色

setColor（$event，item）{
if（item.colorVariable='light'）{
item.colorVariable='keep'
}否则{
if（item.colorVariable='keep'）{
item.colorVariable='light'
}
}
}

HTML

{{item.fname}
这样地

可能是因为您的

setColor

方法不起作用，您的

if

语句中有一个输入错误，要进行比较，应该是

=

或

===

（您可以搜索差异）而不是

=

，因此：

setColor($event,item){
  if(item.colorVariable == 'light'){
    item.colorVariable='keep'
  } else {
    if(item.colorVariable == 'keep'){
      item.colorVariable='light'
    }
  }
}

另外，您不需要另一个if-inside-else，因为它对于您可以使用的colorVariable只有2个值：

setColor($event,item){
  if(item.colorVariable='light'){
    item.colorVariable='keep'
  } else {
    item.colorVariable='light'
  }
}

想要更好的解决方案吗？您可以在单击中执行任何一行代码，因此您可以取消

setColor

方法，并使用如下三元运算符：

<button ion-button icon-start clear item-end (click)="item.colorVariable = item.colorVariable == 'light' ? 'keep' : 'light'" name="add-circle" [color]="item.colorVariable">
  <ion-icon name="navigate"></ion-icon>
    Like this
</button>

希望这有帮助

setColor($event,item){
  item.colorVariable = item.colorVariable == 'light' ? 'keep' : 'light';
}