javascript - Angular 2+ disabling button of a particular row - Stack Overflow

admin管理员组

文章数量:1400823

I am trying to disable the button after a add button has been clicked. For sake of simplicity I am not adding details just the code that is cause the issue.

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

In my ponent I have declared

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

The issue I am facing is that once I click add button first time, all the buttons are disabled, while I want to just disable the button of row that I just clicked.

How can it be fixed?

I am trying to disable the button after a add button has been clicked. For sake of simplicity I am not adding details just the code that is cause the issue.

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

In my ponent I have declared

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

The issue I am facing is that once I click add button first time, all the buttons are disabled, while I want to just disable the button of row that I just clicked.

How can it be fixed?

• javascript
• html
• angular
• button
• disable

Share Improve this question Follow edited Apr 7, 2019 at 5:06 Vega 28.7k2828 gold badges120120 silver badges145145 bronze badges asked Apr 7, 2019 at 3:32 J. DavidsonJ. Davidson 3,3171414 gold badges5656 silver badges105105 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can add a new property to each item of array and check this property for disable item:

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>

I hope this helps you.

If you have a the "ownership" for records array, you can add an other key-value pair, say 'disabled', otherwise you can create a parallel array disablebutton of the same length as records:

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

In the template, you should pass the id of the row which needs the button to be disabled. You get the row index in 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>

And the the method will catch that index to set the button state:

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

Demo

I hope it will work

<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
}

For reference: Disable button with ngFor

本文标签： javascriptAngular 2 disabling button of a particular rowStack Overflow