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

Question

我在每个列表中都分配了嵌套按钮。我想实现的是，当一个特定的按钮被点击时，它的颜色被假设为不同的颜色，当它再次被点击时应该恢复到默认的颜色

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

HTML

<ion-item *ngFor="let item of searchResults">
<ion-avatar item-start>
<img  src="{{item.fb_pic}}">
</ion-avatar>
<h2>{{item.fname}}</h2>
<button ion-button icon-start clear item-end (click)="setColor($event,item);" name="add-circle" [color]="item.colorVariable">
<ion-icon name="navigate"></ion-icon>
Like this
</button>  
</ion-item>

Answer 1

也许它不起作用是因为您的setColor方法，if语句中有一个拼写错误，要进行比较，它应该是==或===(您可以搜索差异(，而不是=，所以：

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

此外，如果在else内部，你也不需要另一个，因为它只能有2个你可以使用的colorVariable值：

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>

三元运算符很像并且很容易内联if/else，如果你不想让这个代码出现在你的按钮中，你可以在你的setColor中进行

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

希望这能有所帮助。