我有使用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

10-05 20:51
查看更多