我有两个按钮,我需要在Ionic中更改其中一个按钮的颜色

可以使用该组件中的特性来保留选定值,然后使用 color 属性 button 根据当前选定的值进行更改。

请看看这个 Working stackblitz demo 。

组成部分 :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

  public selected: number;

  constructor(public navCtrl: NavController) {}

  public selectUnit(unit: number): void {
    this.selected = unit;
  }

}

看法 :

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>

  <p>Selected: {{ selected }}</p> 

  <div>
    <button [color]="selected === 200 ? 'secondary' : 'primary'" ion-button outline (click)="selectUnit(200)">200gms</button>
    <button [color]="selected === 400 ? 'secondary' : 'primary'" ion-button outline (click)="selectUnit(400)">400gms</button>
  </div>
</ion-content

请注意,我使用 [color]="selected === 200 ? 'secondary' : 'primary'" 根据 selected 所有物