typescript “*ngFor”背景颜色变化中的Angular 2“ng-style”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38346883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 “ng-style” within “*ngFor” background color change
提问by sridharan
I am trying to apply background colors using ng-style. Each row of list is generated using ngFor. Each item having separate background colors
我正在尝试使用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>
And the Typescript.ts:
和 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'}
]
},
]
Don't know how to apply color code to list.
不知道如何将颜色代码应用于列表。
回答by Poul Kruijt
You can change the background colour using [style.backgroundColor]:
您可以使用[style.backgroundColor]以下方法更改背景颜色：
<i class="icon" [style.backgroundColor]="item.bgcolor"></i>
If of course the string in item.bgcoloris a valid css colour string:
当然，如果输入的字符串item.bgcolor是有效的 css 颜色字符串：
#FFFFFFwhitergb(255,255,255)rgba(255,255,255,1)
#FFFFFFwhitergb(255,255,255)rgba(255,255,255,1)
Which in your case isn't.. You are missing the leading #and you should change your item list to this:
这在你的情况下不是......你错过了领先#，你应该将你的项目列表更改为：
items: [
{ bgcolor: '#fb9667', img: 'airTicket', category: 'Air tickets' },
{ bgcolor: '#000000', img: 'airTicket', category: 'Beauty/Fitness'},
{ bgcolor: '#0b9660', img: 'airTicket', category: 'Bike'}
]
回答by dixit thareja
You can directly apply this css and the alternate rows will have different color
您可以直接应用此 css，交替行将具有不同的颜色
li { background: green; }
li { 背景：绿色；}
li:nth-child(odd) { background: red; }
li:nth-child(odd) { 背景：红色；}
回答by john edgar otom
for future reference for other developers, here's my answer.
the function will loop all the colors to each row the ngForwill generate
供其他开发人员将来参考，这是我的答案。该函数会将所有颜色循环到ngFor将生成的每一行
<ion-col [ngStyle]="{'background-color': getColors(i) }" *ngFor="let data of Data;let i = index">
Colors:Array<any> = ["#FFF","#0b9660","#FF0000","#000","#FFF","#ffd11a","#fb9667"];
getColors(index) {
let num = this.getnumber(index);
return this.Colors[num];
}
getnumber(data){
let i = data;
if(i > this.Colors.length-1){
i = i - this.Colors.length;
if(i < this.Colors.length){
return i;
}
else {
this.getnumber(i);
}
}
else {
return i;
}
}
