我正在处理一个离子项目,并且在我的项目中,当我单击1个按钮时,另一个按钮也会更改其值,因为它们具有相同的事件。但是我要相反的是,单击按钮应该只更改特定按钮的值。
HTML
<table class="student_list">
<tr><ion-item *ngFor="let record of data">
<ion-avatar slot="start">
<img src="assets/student.png">
</ion-avatar>
<ion-label class="text2">{{record.name}} {{record.id}}
<span class="button1"><button (click)="toggleBackgroundColor()" ion-button [style.background-color]="hexColor" class="btn">{{text}}</button></span>
</ion-label>
</ion-item></tr>
</table>
TS文件
public toggleBackgroundColor(): void {
if(this.hexColor === '#1e90ff') {
this.hexColor = '#ff0000'
this.text='A';
} else {
this.hexColor = '#1e90ff';
this.text = 'P'
} }
答案 0 :(得分:1)
您很可能对两个按钮使用相同的绑定。您将必须使用两组独立的绑定-每个按钮一组。
答案 1 :(得分:1)
您应在要调用该调用的特定标签的函数调用上添加一个标识符。
<button id="changeable" (click)="toggleBackgroundColor('changeable')" ion-button [style.background-color]="hexColor" class="btn">{{text}}</button>
函数:
public toggleBackgroundColor(id): void {
var element = document.getElementById(id);
if(element.hexColor === '#1e90ff') {
element.hexColor = '#ff0000'
element.text='A';
} else {
element.hexColor = '#1e90ff';
element.text = 'P'
} }
答案 2 :(得分:1)
您可以使用一个参数来区分按钮。例如,
(click)="toggleBackgroundColor(1)"
将用于一个按钮,
(click)="toggleBackgroundColor(2)"
将用于其他。 然后功能变为:
public toggleBackgroundColor(who: number): void {
switch(who) {
case 1: /// I'm one button
break;
case 2: /// I'm another :)
break;
}
}
答案 3 :(得分:0)
我认为您的其他按钮使用相同的hexColor
变量。因此,当您修改hexColor
时,它将更新绑定在hexColor
上的每个按钮的属性。
我建议您重构代码以直接修改DOM。
<button (click)="toggleBackgroundColor($event)"
ion-button
[style.background-color]="hexColor"
class="btn">{{text}}
</button>
public toggleBackgroundColor(event): void {
let btnColor = event.srcElement.style['background-color'];
if (btnColor === '#1e90ff') {
btnColor = '#ff0000';
event.srcElement.innerHTML= 'A';
} else {
btnColor = '#1e90ff';
event.srcElement.innerHTML = 'P';
}
}