कोणीय 2 "एनजी-स्टाइल" "* ngFor" पृष्ठभूमि रंग परिवर्तन

Question

मैं 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'} 
    ] 
    }, 
] 

कैसे रंग कोड को सूचीबद्ध करने के लागू करने के लिए पता नहीं है।

Answer 1

आप पृष्ठभूमि रंग [style.backgroundColor] का उपयोग कर बदल सकते हैं:

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

निश्चित रूप से item.bgcolor में स्ट्रिंग मान्य सीएसएस रंग स्ट्रिंग है:

#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'} 
] 

Answer 2

आप सीधे इस सीएसएस लागू कर सकते हैं और वैकल्पिक पंक्तियों अलग रंग

li {पृष्ठभूमि होगा: हरा; }

li: nth-child (विषम) {पृष्ठभूमि: लाल; }