我正在尝试使用ng-style
应用背景颜色。列的每一行都是使用ngFor
生成的。每个项目都有不同的背景颜色
<ion-item class="category-list" *ngFor="let item of character['items']">
<ion-avatar item-left>
<i class="icon" [ngStyle]="{'background-color': item.bgcolor}"><img src="../img/icons/category/{{item.img}}.png"></i>
</ion-avatar>
<h2>{{item.category}}</h2>
</ion-item>
和Typescript.ts:
var characters = [
{
name: 'Gollum',
quote: 'Sneaky little hobbitses!',
items: [
{ bgcolor: 'fb9667', img: 'airTicket', category: 'Air tickets' },
{ bgcolor: '000000', img: 'airTicket', category: 'Beauty/Fitness'},
{ bgcolor: '0b9660', img: 'airTicket', category: 'Bike'}
]
},
]
不知道如何将颜色代码应用于列表。
答案 0 :(得分:19)
您可以使用[style.backgroundColor]
更改背景颜色:
<i class="icon" [style.backgroundColor]="item.bgcolor"></i>
当然,item.bgcolor
中的字符串是有效的css颜色字符串:
#FFFFFF
white
rgb(255,255,255)
rgba(255,255,255,1)
在您的情况下不是..您错过了领先的#
,您应该将项目列表更改为:
items: [
{ bgcolor: '#fb9667', img: 'airTicket', category: 'Air tickets' },
{ bgcolor: '#000000', img: 'airTicket', category: 'Beauty/Fitness'},
{ bgcolor: '#0b9660', img: 'airTicket', category: 'Bike'}
]
答案 1 :(得分:4)
您可以直接应用此css,备用行将具有不同的颜色
li {background:green; }
li:nth-child(odd){background:red; }
答案 2 :(得分:0)
供我参考,供将来其他开发人员参考。
该函数会将所有颜色循环到<!--uses-feature android:name="android.software.leanback" android:required="false" /-->
<!--category android:name="android.intent.category.LEANBACK_LAUNCHER" /-->
<!--application android:banner="@drawable/banner" -->
将生成的每一行
ngFor
<ion-col [ngStyle]="{'background-color': getColors(i) }" *ngFor="let data of Data;let i = index">