特定行的 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

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

组件.ts

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

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

组件.html：

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

我希望这可以帮助你。