我有使用ngFor的10个按钮的列表。我想更改按钮的名称以启用和禁用。首先,我有Disable
,当我单击按钮时,带有id
的特定按钮应将文本更改为Enable
,但每10个按钮都会更改一次。html
<div *ngFor="let task of tasks">
<button (click)="enableDisableRule(task.id)">{{toggleButton}}</button>
</div>
component
toggle = true;
toggleButton = 'Disable';
tasks = [
{"id": 1, "name":"john"},
{"id": 2, "name":"tom"},
.............
.......
{"id":10, "name":"harry"}
]
enableDisableRule(id) {
this.toggle = !this.toggle;
this.toggleButton = this.toggle ? 'Disable' : 'Enable';
}
有人可以让我知道该怎么做,以便仅更改特定的按钮文本。
任何帮助表示赞赏。谢谢
最佳答案
您需要为每个Button对象添加两个以上的属性,而不能使用相同的变量。
tasks = [
{"id": 1, "name":"john","toggle":false,"status":'Disable'},
{"id": 2, "name":"tom","toggle":false,"status":'Disable'},
{"id":10, "name":"harry","toggle":false,"status":'Disable'}
];
然后,
enableDisableRule(button) {
button.toggle = !button.toggle;
button.status = button.toggle ? 'Disable' : 'Enable';
}
STACKBLITZ DEMO