如何在离子2中设置div的背景颜色？

Question

我想设置div的背景颜色。例如：第一个div中的灰色，第二个div中的蓝色。我使用ngFor在div标签中显示数据。如何设置不同的背景 - 特殊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

你可以这样做。使用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。

Answer 2

尝试使用以下代码，使用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;
  }

Answer 3

div中的奇数事件颜色

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

.ts

中的arrayColor

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