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

Question

我在尝试使用(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";
    }
  }

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>

​