Угловая 2+ кнопка отключения определенного ряда - PullRequest
Новая
       25

Угловая 2+ кнопка отключения определенного ряда

2 голосов
/ 07 апреля 2019

Я пытаюсь отключить кнопку после нажатия кнопки добавления. Для простоты я не добавляю подробности, а просто код, который является причиной проблемы. 

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

Проблема, с которой я сталкиваюсь, заключается в том, что как только я нажимаю кнопку «Добавить» в первый раз, все кнопки отключаются, а я хочу просто отключить кнопку строки, которую я только что нажал.

Как это можно исправить?

Ответы [ 3 ]

2 голосов
/ 07 апреля 2019

Вы можете добавить новое свойство к каждому элементу массива и проверить это свойство для отключения элемента:

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>

Надеюсь, это вам поможет.

2 голосов
/ 07 апреля 2019

Если у вас есть «владение» для массива records, вы можете добавить другую пару ключ-значение, скажем «отключено», в противном случае вы можете создать параллельный массив disablebutton той же длины, что и записи: 

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

В шаблоне вы должны передать идентификатор строки, для которой нужно отключить кнопку. Вы получаете индекс строки в 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;
  }

Демо

2 голосов
/ 07 апреля 2019

Я надеюсь, что это будет работать 

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

Для справки: Отключить кнопку с помощью ngFor

...