angolare 2 “ng-style” all'interno di “* ngFor” background cambiamento di colore

Question

sto cercando di applicare i colori di sfondo con ng-style. Ogni riga di elenco viene generata utilizzando ngFor. Ogni elemento che ha i colori di sfondo separati

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

E i 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'} 
    ] 
    }, 
] 

Non so come applicare il codice colore alla lista.

Answer 1

È possibile modificare il colore di sfondo con [style.backgroundColor]:

<i class="icon" [style.backgroundColor]="item.bgcolor"></i> 

Se, naturalmente, la stringa nel item.bgcolor è una stringa di colore css validi:

#FFFFFF white rgb(255,255,255) rgba(255,255,255,1)

Che nel tuo caso non è .. Sei missin g leader # e si dovrebbe cambiare il vostro elenco di elementi a questo:

items: [ 
     { bgcolor: '#fb9667', img: 'airTicket', category: 'Air tickets' }, 
     { bgcolor: '#000000', img: 'airTicket', category: 'Beauty/Fitness'}, 
     { bgcolor: '#0b9660', img: 'airTicket', category: 'Bike'} 
] 

Answer 2

È possibile applicare direttamente il css e le file alternate avrà colore diverso

li {background: verde; }

li: nth-child (dispari) {background: red; }