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

【问题标题】：toggle change nested button colors in ionic 2x在 ionic 2x 中切换更改嵌套按钮颜色
【发布时间】：2018-12-20 10:57:20
【问题描述】：

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

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>

【问题讨论】：

标签： html angular typescript ionic2

【解决方案1】：

可能由于您的setColor 方法而无法正常工作，您的if 语句中有错字，比较它应该是== 或===（您可以搜索差异）而不是= ，所以：

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

此外，如果在 else 内部，您也不需要另一个 if，因为它可以只有 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';
}

希望这会有所帮助。

【讨论】：