イオン2のdivの背景色を設定する方法は？

Question

divの背景色を設定したいと思います。たとえば、最初のdivの灰色、2番目のdivの青色です。divタグにngForを使用してデータを表示しています。特定の背景色を設定する方法はありますかdiv。お知らせ下さい。

<div style="background-color: #DFE0E2;border:solid pink;float:left;width:30%;margin-left:20px;" *ngFor="let list of dataa"> 
     <img src="assets/imgs/user.png" style="padding-left:70px;"> 
     <footer style="background-color: #ffffff;padding:5px;margin:0px;"> 
     <p style="margin:5px;font-size:18px;">{{list.name}} 
      <ion-icon ios="ios-create" md="md-create" (click)="user(list)"></ion-icon> 
     </p> 
     <p style="margin:5px;color:#808B96">{{list.tagline}}</p> 
     </footer> 
    </div> 

Answer 1

でdivの中に奇妙な、イベントの色と

Answer 2

あなたはこのような何かを行うことができます。 ngClassを使用します。

Code.html

<ul *ngFor="let person of people"> 
    <li [ngStyle]="{'font-size.px':24}" 
     [style.color]="getColor(person.country)"> 
    {{ person.name }} ({{ person.country }}) 
    </li> 
</ul> 

Code.ts

 getColor(country) { 
    switch (country) { 
     case 'UK': 
     return 'green'; 
     case 'USA': 
     return 'blue'; 
     case 'HK': 
     return 'red'; 
    } 
    } 

はより理解するために、このlinkを参照してください。 .TS

arrayColor = { 
0: '#CCCCCC', 
1: '#DFE0E2' 
} 

Answer 3

<div [style.background-color]="arrayColor[i%2]" style="border:solid pink;float:left;width:30%;margin-left:20px;" *ngFor="let list of dataa; let i = index"> 
     <img src="assets/imgs/user.png" style="padding-left:70px;"> 
     <footer style="background-color: #ffffff;padding:5px;margin:0px;"> 
     <p style="margin:5px;font-size:18px;">{{list.name}} 
      <ion-icon ios="ios-create" md="md-create" (click)="user(list)"></ion-icon> 
     </p> 
     <p style="margin:5px;color:#808B96">{{list.tagline}}</p> 
     </footer> 
    </div> 

arrayColorは、それが必要ごとに異なるクラスを提供するためのngclassを使用して以下のコードを試してみてください。

In your .ts File: 

    <ion-item *ngFor="let item of items;let i = index;"> 
    <div [ngClass]="i%2 === 0 ? 'gray' : 'white'"></div> 
    </ion-item> 

    In .css file: 
    .gray{ 
    background-color: #EBE5D9; 
    } 
    .white{ 
    background-color: #FFFFFF; 
    }