2017-12-29 31 views
0

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

enter image description here

答えて

1

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

+0

ありがとう...その作品.. –

+0

私は最初のdiv、2番目のdivの青、3番目のdivのピンク、4番目のdivの#EBE5D9、5番目のdivの#FFFFFFの灰色を変更したいと思います。 –

+0

は、関数を作成して0,1,2,3 ...の値をその関数に、.tsファイルにhexcolourの値を代入する必要がありました。 – Husain

0

あなたはこのような何かを行うことができます。 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' 
} 
0

<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; 
    } 
+0

私はこのコードを使用しますが、それは私にエラーを与える「プロパティを読み取ることができません 『0』未定義の」 –

+0

あなたはコンポーネントでarrayColor変数を定義していますか? –

関連する問題