单击时更改离子项目的背景颜色答案

【问题标题】：Change background color of ion-item on click单击时更改离子项目的背景颜色
【发布时间】：2019-08-20 05:02:48
【问题描述】：

我想在用户单击它时更改离子项的背景颜色，就像我可以做的那样。提前致谢

示例代码：

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

【问题讨论】：

您好，请使用 [ngClass] 而不是 [class]。

标签： javascript css angular typescript ionic-framework

【解决方案1】：

在此处查看官方文档（查看“使用 Css”或“javascript”）：https://ionicframework.com/docs/theming/css-variables#ionic-variables

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

--background-activated :    Background of the button when activated

喜欢：

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

如果您只想更改它的颜色，我不会寻求角度解决方案。这是一个与样式相关的问题，因此您应该使用 ionic 针对此特定用例提供的解决方案来解决它。否则只会使您的代码阅读起来更加繁重且性能降低。但是如果你想在你的组件被点击后应用多个类，那么你需要使用 [ngClass]

【讨论】：

我给按钮和这个css属性设置了一个类，但是什么都没有

【解决方案2】：

在您的 component.ts 文件中：

声明一个变量：

buttonColor: string = '#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>

在您的函数中进行以下更改：-

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

【讨论】：