Angular10 - 使用 onClick 事件更改多个 css id

Question

我在尝试使用（单击）事件更改按钮的 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";
    }
  }

Answer 1

我认为你可能有一些正当的理由让元素有重复的 id。 在 angular 中以高性能的方式执行此操作将与 ngFor 和 trackby 有关。 CodeSandbox Implementation提供了一个示例实现

 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>