我有四个按钮组
<button round ion-button> David </button>
<button round ion-button> Rocky</button>
<button round ion-button> Chris</button>
<button round ion-button> Johny</button>
我想在打字稿中一次只启动按钮(更改背景颜色)一个按钮。怎么办。
答案 0 :(得分:1)
您可以使用export class YourPage {
public active: string; // add this property
constructor() { }
// method to update the active property
updateActive = name => this.active = name;
}
指令有条件地将CSS类分配给您的活动按钮。要实现这一目标,您需要CSS类和.ts中的属性来了解活动按钮的内容。
所以你的.TS将是:
<button round ion-button [ngClass]="'your-css-class': active === 'david'" (click)="updateActive('david')"> David </button>
<button round ion-button [ngClass]="'your-css-class': active === 'rocky'" (click)="updateActive('rocky')"> Rocky</button>
<button round ion-button [ngClass]="'your-css-class': active === 'chris'" (click)="updateActive('chris')"> Chris</button>
<button round ion-button [ngClass]="'your-css-class': active === 'johny'" (click)="updateActive('johny')"> Johny</button>
然后更改您的HTML:
active
这应该有效,如果您需要一个按钮来启动活动,只需在str_extract
属性中为其赋值。如果您的.ts文件中的活动按钮被管理,则只需删除click属性即可。如果您需要更多帮助,请点击Loops in Java – Ultimate Guide。
希望这有帮助。
更新为使用方法而不是直接在点击上分配值,如op要求的那样。