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

Question

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

home.html

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

home.ts

     import { Component } from '@angular/core';
     import { NavController } from 'ionic-angular';
     import {Http,Response} from '@angular/http';
     import {DataService} from '../../app/dataapi/data-api.service';

    @Component({
    selector: 'page-home',
     templateUrl: 'home.html'
     })
     export class HomePage {

      getdata : any;


      constructor(public navCtrl: NavController ,public http:Http,public 
     dataApi:DataService) {

    }

     ionViewDidLoad() { 

       this.dataApi.getVideo().then(data =>
        this.getdata = data);   
    }

 }

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 必须是variables.scss 文件中colors 数组的一部分：

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

  //...

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