Angular 2+ 特定行的禁用按钮

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
}

供参考：

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

如果你有一个 "ownership" 用于 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+ 特定行的禁用按钮

Angular 2+ disabling button of a particular row

html

javascript

button

angular

disable