我在尝试用（click）事件更改按钮的css时遇到了一些麻烦。我设法做到了，但问题是我有10个按钮，所以我不能依赖于。ts中的一个变量，因为一旦它改变了，它会影响所有10个按钮，而不仅仅是被点击的那个按钮，所以我唯一想到的是有10个不同的变量，但它不太优雅。有没有什么办法可以做得更干净一点？
以下是我目前得到的信息:
HTML:
<button (click)="b1 = !b1" class="tarea" [id]="cambiaId(b1)"></button>
<button (click)="b2 = !b2" class="tarea" [id]="cambiaId(b2)"></button>
<button (click)="b3 = !b3" class="tarea" [id]="cambiaId(b3)"></button>
[...]
<button (click)="b10 = !b10" class="tarea" [id]="cambiaId(b10)"></button>
TS:
export class TareasComponent {
b1 : boolean = false;
b2 : boolean = false;
b3 : boolean = false;
[...]
b10 : boolean = false;
cambiaId(b : boolean){
if (b) {
return "done";
}else{
return "todo";
}
}
我认为您可能有一些合理的理由使元素的id重复。在angular中以性能方式进行这将与ngFor和TRACKBY有关。CodeSandbox实现中提供了示例imlementation
null
buttons: ButtonType[] = Array(10)
.fill("todo")
.map((value, i) => ({ id: i, value }));
trackById(index: number, button: ButtonType) {
return button.id;
}
buttonClicked(index: number, button: ButtonType) {
const ret = this.buttons.slice(0);
ret[index] = {
...button,
value: button.value ? "done" : "todo"
};
this.buttons = ret;
}<ng-container *ngFor="let item of buttons; index as i; trackBy:trackById">
<button [id]="item.value" (click)="buttonClicked(i, item)" class="tarea">
{{item.value}}
</button>
</ng-container>