按数据调整按钮颜色（Ionic2）

Question

我有一个json数据库。我希望不同的Id有不同的颜色。如果Id = 1，请将按钮设置为蓝色。如果Id = 0，请将按钮设置为红色。您知道我该怎么做。

home.html的

git checkout -m

home.ts

      <ion-header>
       <ion-navbar>
         <ion-title>
           Ionic Blank
         </ion-title>
       </ion-navbar>
     </ion-header>


     <ion-content padding>
         <ion-list >
           <ion-item *ngFor="let item of getdata">
              {{item.name}} {{item.id}}
         <button ion-button round class="ilanbtnn" >{{item.surname}</button> 
            </ion-item>
            </ion-list>
     </ion-content>

Answer 1

您可以使用属性绑定来设置基于id的颜色：

 <ion-content padding>
         <ion-list >
           <ion-item *ngFor="let item of getdata">
              {{item.name}} {{item.id}}
         <button [color]="item.id === 1 ? 'custom-blue' : 'custom-red'" ion-button round class="ilanbtnn" >{{item.surname}</button> 
            </ion-item>
            </ion-list>
     </ion-content>

请注意，custom-blue和custom-red必须是colors文件中variables.scss数组的一部分：

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  //...

  custom-blue:    #387ef5,
  custom-red:     #f53d3d
);