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'
    }
  }
}

如果在其他地方，也不需要另一个，因为它可以只有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>

如果不是，三元运算符就像并且很容易内联，如果您不想在按钮中使用此代码，可以在setColor中完成

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

希望这会有所帮助。

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

1 个答案: