我可以在 Ionic 4 中动态更改 ion-item 自定义 css 属性 --background 吗？

Question

我们如何设置动态背景颜色？我需要基于数组渲染 ion-item 元素。我需要在 ngFor 循环中设置背景颜色，来自数组中的每个值。有什么想法吗？

我尝试过这样的事情。但它不起作用

<ion-list *ngFor="let shift of shifts">
     <ion-item [style.--background]="'shift.color'">{{ shift.color }} qwe</ion-item>
</ion-list>

Answer 1

试试这个，

<ion-list *ngFor="let shift of shifts">
     <ion-item [style.background]="shift.color"> {{shift.color}} qwe</ion-item>
</ion-list>

Answer 2

我相信你可以通过改变它来做到这一点，

<ion-list *ngFor="let shift of shifts">
     <ion-item [color]="shift.color">{{ shift.color }} qwe</ion-item>
</ion-list>

Answer 3

我也为您创建了一个堆栈闪电战，以展示这一切是如何运作的： https://stackblitz.com/edit/using-ngstyle-and-ngclass

上面的答案肯定会起作用，但是让我告诉你，还有其他方法可以做到这一点，不管你是静态的还是动态的，都会以动态的方式使用。

/* Your way (mistake is that you added -- before the string and you used shift.color with '' so it gets passed as string) */
<ion-list *ngFor="let shift of shifts">
     <ion-item [style.background]="shift.color">{{ shift.color }}qwe</ion-item>
</ion-list>

/* using ngStyle (you can add a fall back color if shift.color doesn't exist) */
<ion-list *ngFor="let shift of shifts">
     <ion-item [ngStyle]="{'background-color': shift?.color ? shift.color : 'red' }">color</ion-item>
</ion-list>

/* another way is to use ngClass where you can define classes for the color codes and from the backend you get class names which I believe are more readable and you can remember */
<ion-list *ngFor="let shift of shifts">
     <ion-item [ngClass]="{'color-green': shift?.color}">color</ion-item>
</ion-list>