1
votes

Comment désactiver un bouton particulier dans Angular 7

Je vais désactiver un bouton particulier d'un tas de boutons comme ci-dessous:

myfunc(id){
//
}

Dites, je veux désactiver paybtn-1 quand il a cliqué .

Dans le fichier ts , je passe le id du bouton cependant, j'ai bloqué comment désactiver le bouton particulier:

XXX

angular angular-template

2 commentaires

si vous êtes sûr du nombre de boutons dont vous avez besoin, vous pouvez avoir un tableau de booléens dans ts et le lier avec des boutons pour la propriété désactivée

devrait fonctionner où disabled est votre variable qui contient l'indicateur.

4 Réponses :

3
votes

Si vous avez besoin de le faire correctement, ayez un tableau défini dans votre TS pour chaque bouton et liez la propriété disalbed au bouton. Changez-le en faux en cliquant sur le bouton.

2 commentaires

@ NiladriBanerjee-Uttarpara ces boutons sont-ils dans n'importe quel tableau de données?

@ashishpal Non, ils ne sont pas dans le tableau de données

0
votes

Pour garder votre style:

Ajoutez une propriété désactivée au bouton

Ajouter une méthode pour appliquer désactivé à ce bouton

let disabled = {1:false,2:false,3:false}
myfunc(id){
disabled[id] = true
}

0 commentaires

2
votes

Pour désactiver un bouton, vous pouvez utiliser [disabled] , comme ça:

<button [disabled]="booleanCondition" name="paybtn-1" id="paybtn-1" (click)="myfunc(1)">Pay</button>

Et vous devez définir la booleanCondition var dans votre fichier .ts

0 commentaires

1
votes

Dans ce cas, la meilleure façon est de désactiver le bouton par attribut désactivé .

Composant:

<button [id]="id" name="paybtn-1"(click)="myfunc(1)">Pay</button>

HTML:

 element: HTMLElement;    
disableButton(id) {
        this.element = document.getElementById(id) as HTMLElement;
        this.element.setAttribute('disabled', 'true');
      }
      enableButton(id) {
        this.element = document.getElementById(protocol) as HTMLElement;
        this.element.removeAttribute('disabled');
      }

REMARQUE:

id est une var p>

Cela fonctionne très bien pour moi.

0 commentaires