Javascript 单击可更改离子项目的背景色

我想改变离子项目的背景颜色时，用户点击它，因为我可以做。 提前谢谢

示例代码：

 <ion-item (click)="openDetail(variant)">{{variant.ProductVariantName} 
  <ion-button slot="end" [hidden]="variant.ProductVariantValue.length==0" fill="clear" color="dark">
   <i [class]="variant.showDetail ? 'fa fa-arrow-up fa-lg':'fa fa arrow down fa-lg'"></i>
  </ion-button>
 </ion-item>

{{variant.ProductVariantName}

请参阅此处的官方文档（请参阅“使用Css”或“javascript”）：

您正在寻找的是在主题（或自定义css）中更改此变量

比如：

.fancy-button {
   --background-activated: red;
}

如果你只想改变它的颜色，我不会选择角度的解决方案。这是一个与风格相关的问题，因此你应该用ionic为这个特定用例提供的解决方案来解决。否则只会让你的代码更难阅读，性能更低。

---

但是，如果要在单击组件后将多个类应用于组件，则需要在component.ts文件中使用[ngClass]

：

声明一个变量：

按钮颜色：字符串=“#000”

将您的HTML编辑为：-

<ion-item (click)="openDetail(variant)" [ngStyle]="{'background-color': 
buttonColor}">{{variant.ProductVariantName}
<ion-button slot="end" [hidden]="variant.ProductVariantValue.length==0" 
fill="clear" color="dark">
 <i [class]="variant.showDetail ? 'fa fa-arrow-up fa-lg':'fa fa arrow down 
fa-lg'"></i>
</ion-button>
</ion-item>

---

您好，请使用[ngClass]而不是[class]。我为按钮和css属性提供了一个类，但什么都没有

<ion-item (click)="openDetail(variant)" [ngStyle]="{'background-color': 
buttonColor}">{{variant.ProductVariantName}
<ion-button slot="end" [hidden]="variant.ProductVariantValue.length==0" 
fill="clear" color="dark">
 <i [class]="variant.showDetail ? 'fa fa-arrow-up fa-lg':'fa fa arrow down 
fa-lg'"></i>
</ion-button>
</ion-item>

openDetail(variant){
   this.buttonColor = '#345465';
}