在 ngFor 内单击时更改特定按钮文本答案

【问题标题】：Change specific button text on click inside ngFor在 ngFor 内单击时更改特定按钮文本
【发布时间】：2019-01-06 03:23:51
【问题描述】：

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

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

感谢任何帮助。谢谢

【问题讨论】：

在你的情况下，如果你改变一个按钮另一个变成禁用，只有一个任务可以被激活？？
@Muhammed 我想启用和禁用任何按钮，一个按钮不应影响另一个按钮。
我已经更新了我的答案，希望对你有用

标签： javascript angular ngfor

【解决方案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

【讨论】：

感谢您的工作演示。但是我必须尝试在不添加额外属性的情况下工作，因为我从 api 获得任务并且我无法编辑 api.. 如果不添加额外属性就没有任何办法.. :)
即使是 API 数据，您也可以遍历它们并添加属性并创建自定义数组
Sajeetharan 提供了一个简单有效的解决方案。您可以在 UI 中拥有自己的模型，当然您可以对其进行编辑并将任何模型发送到服务器。他给出的这个解决方案是理想的。
不增加额外属性就没有办法了吗？ task=task.map(x=>{...x,status:"Disabled"})
@Eliseo 否，因为您需要处理单个按钮的状态

【解决方案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;
}

【讨论】：

我喜欢您尝试展示的方法，但它不起作用。首先，始终启用一个按钮，其次，单击另一个按钮后，启用按钮变为禁用。
嘿 - 我默认添加了第一个 - 来演示这些概念。会改变答案。要拥有多个按钮 - 您需要按照其他答案的建议向数据添加一个属性，或者拥有一个 activeButtonIds 数组并且如果按钮 id 在那里 - 相应地显示更新文本。然后，您需要一种在 sdeselection 上从数组中删除 id 的方法。

【解决方案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

【讨论】：

【解决方案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";
}

【讨论】：

【解决方案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

【讨论】：