javascript - 在 ngFor 中单击更改特定按钮文本

Question

我有一个使用 ngFor 的 10 个按钮的列表。我想更改按钮的名称以启用和禁用。起初我有 Disable 并且当我点击按钮时，带有 id 的特定按钮应该将文本更改为 Enable 但是每 10 个按钮得到改变了。

html

<div *ngFor="let task of tasks">
    <button (click)="enableDisableRule(task.id)">{{toggleButton}}</button>
</div>

组件

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';
}

谁能告诉我该怎么做才能只更改特定的按钮文本。

感谢任何帮助。谢谢

Answer 1

您需要为每个 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