[英]Angular10 - Change multiple css id with onClick event
我在嘗試使用(單擊)事件更改按鈕的 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 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.