web-dev-qa-db-ja.com

Angular 2「* ngFor」の背景色の変更内の「ng-style」

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

リストにカラーコードを適用する方法がわかりません。

javascriptcsstypescriptangularionic2
12
sridharan

_[style.backgroundColor]_を使用して背景色を変更できます。

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

もちろん、_item.bgcolor_の文字列が有効なCSSカラー文字列の場合：

_#FFFFFF_ whitergb(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'}
]
_
20
PierreDuc

このCSSを直接​​適用することができ、交互の行は異なる色になります

li {背景：緑; }

li：nth-​​child（odd）{background：red; }

4
dixit thareja

他の開発者のための将来の参考のために、これが私の答えです。関数は、ngForが生成する各行にすべての色をループします

<ion-col [ngStyle]="{'background-color': getColors(i) }" *ngFor="let data of Data;let i = index">

Colors:Array<any> = ["#FFF","#0b9660","#FF0000","#000","#FFF","#ffd11a","#fb9667"];

  getColors(index) {

    let num = this.getnumber(index);
    return this.Colors[num];
  }

  getnumber(data){

    let i = data;
    if(i > this.Colors.length-1){

       i = i - this.Colors.length;
       if(i < this.Colors.length){
        return i;
       }
       else {
        this.getnumber(i);
       }

    }
    else {
      return i;
    }


  }
1
john edgar otom