动态设置离子列表中离子项的背景颜色答案

【问题标题】：Dynamically set background color of ion-item in an ion-list动态设置离子列表中离子项的背景颜色
【发布时间】：2020-06-26 17:27:10
【问题描述】：

我正在尝试在 Angular 应用程序中设置组件的背景颜色，但我似乎无法让它与代码一起使用。

如果我查看页面并手动将元素的 css 更改为在浏览器中使用 --background: red，那么它的工作方式如下所示。

但是，如果我尝试通过代码更改它，那么 CSS 根本不会显示在元素上的浏览器中，当然颜色也不会改变。

<ion-list inset *ngIf="socketService.connected$ | async">
  <ion-item
    *ngFor="let user of users$ | async"
    button
    (click)="selectUser(user)"
    [ngStyle]="{ '--background': user.color }"
  >
    <ion-label color="primary">{{user.name}}</ion-label>
  </ion-item>
</ion-list>

我还将绑定到[ngStyle] 的表达式移到了一个返回对象的方法中，这样我就可以确保返回了正确的css。 user.color 是 #XXXXXX 形式的十六进制颜色

【问题讨论】：

标签： angular ionic-framework ionic5

【解决方案1】：

在离子项目上使用[style.--background]="user.color" 有效。我猜 Angular 正在删除该样式，因为它以 --

开头

【讨论】：