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

Question

我有一个使用 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';
}

谁能告诉我如何才能只更改特定的按钮文本。

感谢任何帮助。谢谢

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

Answer 2

您可以设置活动元素的 id 并将其用作文本更改的基础

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

toggle = true;
activeButtonId = null;

tasks = [
  {"id": 1, "name":"john"},
  {"id": 2, "name":"tom"},
  .............
  .......
  {"id":10, "name":"harry"}
]

enableDisableRule(id) {
    this.toggle = !this.toggle;
    this.activeButtonId = id;
}

getButtonText(id) {
  let buttonText;
  id === this.activebuttonId  ? buttonText= "Enable" : buttonText = "Disable";
  return buttonText;
}

Answer 3

我将使用 selectedButton 来存储所选按钮的状态，这样按钮的状态就不会保存在模型中 (tasks)

组件

  selectedButton = {}

  tasks = [
    { "id": 1, "name": "john" },
    { "id": 2, "name": "tom" },
    { "id": 10, "name": "harry" }
  ];

  enableDisableRule(id) {
    this.selectedButton[id]= !this.selectedButton[id];
  }

模板

<div *ngFor="let task of tasks">
    <button (click)="enableDisableRule(task.id)">
    {{selectedButton[task.id] ? 'Enabled' : 'Disabled'}}
  </button>
</div>

stackblitz example

Answer 4

创建一个函数以动态地向任务对象添加另一个属性

 addProperties(){
for(task in this.tasks){
task[toogle]=true;
 task[toogleButton]="Disable";
 }
}

并调用此方法为任务对象中的每个任务添加两个属性，然后将 enableDisableRule(id) 更改为此

enableDisableRule(id) {
for (task in this.tasks){
if(task[id]==id){
task.toggle=!task[toogle];
task.toogleButton=task.toogle ? "Disable" : "Enable";
}

Answer 5

HTML:

<ng-container *ngFor="let task of tasks"> 
   <button id="btn-{{task.id}}" (click)="toggleMe(task.id)">{{ text }}</button>
</ng-container>

TS:

text = 'Enable';
tasks = [
 {"id": 1, "name":"john"},
 {"id": 2, "name":"tom"},
 {"id":10, "name":"harry"}
]
private toggleMe(id: number): void {
 document.getElementById("btn-"+id).innerHTML = document.getElementById("btn- 
 "+id).innerHTML == "Disable" ? "Enable" : "Disable";
}

Working Demo

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

Change specific button text on click inside ngFor

javascript

ngfor

angular