Question

我试图在单击添加按钮后禁用该按钮。为了简单起见，我不仅仅添加引起问题的代码的详细信息。

<div *ngFor="let n of records">
   <span>{{n.name}}</span>
   <span>{{n.location}}</span>
   <button (click)="addtomainrecord(n)" [disabled]="disablebutton">add</button>
</div>

我在组件中声明

  disablebutton:boolean=false;
   //later in my code
  addtomainrecord(record) {
     this.disablebutton=true;
   //rest of the code follows
  }

我面临的问题是，当我第一次单击添加按钮时，所有按钮都被禁用，而我只想禁用刚刚单击的行中的按钮。

如何解决？

Answer 1

我希望它能起作用

<div *ngFor="let n of records">
   <span>{{n.name}}</span>
   <span>{{n.location}}</span>
   <button (click)="addtomainrecord(n)" [disabled]="n.disablebutton">add</button>
</div>


addtomainrecord(record) {,
     record.disablebutton=true;
   //rest of the code follows
}

以供参考：Disable button with ngFor

Answer 2

您可以向数组的每个项目添加一个新属性，并检查此属性中的禁用项目：

Component.ts

myArray:Array<{firstName:string,lastName}>=[]; // there isn't isDisabled in this model

doSomething(item){
   item.isDisabled=true;
   // do something
}

Component.html：

<div *ngFor="let item of myArray">
   <button (click)="doSomething(item)" [disabled]="item.isDisabled">Register</button>
</div>

希望对您有帮助。

Answer 3

如果您拥有records数组的“所有权”，则可以添加另一个键值对，例如“ disabled”，否则可以创建相同长度的并行数组disablebutton作为记录：

  disablebutton = [false,false,...] // better be done in a for loop or with array methods in your code

在模板中，您应该传递需要禁用按钮的行的ID。您在ngFor中获得行索引：

<div *ngFor="let n of records; let i = index">
   <span>{{n.name}}</span>
   <span>{{n.location}}</span>
   <button (click)="addtomainrecord(i)" [disabled]="disablebutton[i]">add</button>
</div>

然后该方法将捕获该索引以设置按钮状态：

  addtomainrecord(index) {
    this.disablebutton[index] = true;
  }

Demo

特定行的Angular 2+禁用按钮

3 个答案: