2
votes

Bouton de désactivation angulaire 2+ d'une ligne particulière

J'essaie de désactiver le bouton après avoir cliqué sur un bouton d'ajout. Par souci de simplicité, je n'ajoute pas de détails uniquement sur le code à l'origine du problème.

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

Dans mon composant, j'ai déclaré

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

Le problème auquel je suis confronté est qu'une fois que je clique sur le bouton Ajouter pour la première fois, tous les boutons sont désactivées, alors que je veux simplement désactiver le bouton de la ligne sur laquelle je viens de cliquer.

Comment peut-il être corrigé?

javascript angular html button disable

0 commentaires

3 Réponses :

2
votes

J'espère que cela fonctionnera

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

Pour référence: Désactiver le bouton avec ngFor

0 commentaires

5
votes

Vous pouvez ajouter une nouvelle propriété à chaque élément du tableau et vérifier cette propriété pour désactiver l'élément:

Component.ts

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

Component.html: p >

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

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

J'espère que cela vous aidera.

0 commentaires

2
votes

Si vous disposez d'un tableau "propriété" pour enregistrements , vous pouvez ajouter une autre paire clé-valeur, par exemple "désactivé", sinon vous pouvez créer un tableau parallèle disablebutton code> de la même longueur que les enregistrements:

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

  Dans le modèle, vous devez passer l'id de la ligne qui nécessite que le bouton soit désactivé. Vous obtenez l'index de ligne dans 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>
  Et la méthode capturera cet index pour définir l'état du bouton: 
   disablebutton = [false,false,...] // better be done in a for loop or with array methods in your code
   Démo

2 commentaires

Si vous avez besoin de plus de détails sur la création et l'utilisation de la paire clé-valeur dans les enregistrements, commentez-moi :)

Merci, je l'ai fait fonctionner en utilisant votre solution. Toute solution avait l'air bien la vôtre n'a nécessité aucun changement dans mon objet.