Angular 2+ кнопка отключения определенной строки

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

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

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

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


javascript angular button html disable
person J. Davidson    schedule 07.04.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Если у вас есть «право собственности» на массив 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;
  }

Демо

person Vega    schedule 07.04.2019
comment
Если вам нужна дополнительная информация о создании и использовании пары ключ-значение в записях, прокомментируйте меня :) - person Vega; 07.04.2019
comment
Спасибо, я получил его для работы, используя ваше решение. Все решение выглядело хорошо, ваше не требовало изменений в моем объекте. - person J. Davidson; 07.04.2019

arrow_upward
5
arrow_downward

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

Компонент.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>

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

person Morteza Ebrahemi    schedule 07.04.2019

arrow_upward
2
arrow_downward

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

<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

person Muhammad Ovais Hanif    schedule 07.04.2019