Angulaire bouton désactiver après cliquez sur?

J'ai plusieurs bouton im essayant de désactiver le bouton après l'obtention de la réponse.Im en utilisant ngClass pour désactiver le bouton après l'obtention de la réponse

<tr *ngFor="let item of data">

  <td>{{item.username}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.phone}}</td>
                   <td><button  type="button" [ngClass]="{disabled : item.username === name }" (click)="changestatus(item.username)" class="btn btn-success btn-xs" >Change Status</button></td>

</tr>

Et mon changestatus fonction

public name : string ;

 changestatus(username : string){

         this.httpService.changeuserstatus({uname : username }).subscribe(data => {

           this.name = (data.data == 1) ? username : "no";

         })

  }

im de l'affectation de la valeur de nom d'utilisateur pour le nom de la variable et si les deux matchs, je vais désactiver le bouton

Le problème est que si je clique sur le 1er bouton après l'obtention de la réponse il est désactivé mais quand je clique sur le 2ème bouton de la après avoir de réponse 1er bouton est activé et que le 2ème bouton est désactivé.Mais la chose est nécessaire pour désactiver les boutons. M'aider merci d'avance

InformationsquelleAutor Arun Kumaresh | 2017-07-10
  1. 8

    @maciej-caputa est correcte concernant l'utilisation de [disabled] plutôt que d'une classe, mais votre erreur est en fait en raison de la logique de l'application.

    Votre fonction changestatus() les mises à jour de la variable globale this.name.
    Cela va affecter toutes les lignes, depuis leur disabled de l'etat est subordonnée à 'item.username === name'

    Essayez ce qui suit - je suis en supposant que item est d'un type appelé User (dont vous aurez besoin pour ajouter une nouvelle propriété isDisabled:

    Modèle:

    export class User {
  username: string;
  name: string;
  email: string;
  phone: string;
  isDisabled: boolean;
}

    component.html:

    <tr *ngFor="let item of data">
    <td>{{item.username}}</td>
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td><button  type="button" [disabled]="item.isDisabled" (click)="changestatus(item)" class="btn btn-success btn-xs" >Change Status</button></td>
</tr>

    composant.ts:

        changestatus(user: User){
        this.httpService.changeuserstatus({uname : user.username }).subscribe(data => {
            user.isDisabled = (data.data == 1);
        });
    }

    Très simple plunkr la démonstration d'une version de travail: https://plnkr.co/edit/quLBCMoFtragJ32OBTvp

    • j'ai plusieurs boutons et si cliquez sur le 1er bouton, il doit être désactivé et j'ai cliquez sur le 2ème bouton, il doit être désactivé sans activer le 1er bouton, et votre réponse permet le 1er bouton en cliquant sur le 2ème bouton
    • Il y avait quelques fautes de frappe avant - La plunkr montre une version de travail à l'aide de cette approche
    InformationsquelleAutor Steve Land
  2. 4

    Pour vraiment avoir le bouton désactivé, vous devez utiliser disabled attribut sur le bouton de l'élément sinon, vous ne changer de style, mais encore être en mesure de cliquer dessus. Dans angular2 que vous pouvez lier un attribut comme suit.

    <button [disabled]='item.username === name'></button>
    • ce ce que j'ai aussi essayé, mais donne le même résultat ce que j'ai mentionné.Le problème est qu'à chaque fois le nom de la variable est la nouvelle valeur
    • Vous pouvez déplacer item.username === name pour une méthode publique sur un composant, puis appeler <button [disabled]='isDisabled()'></button> c'est une bonne pratique et peut vous aider à vérifier la logique. Si vous avez besoin de style puis, il y référer par button:disabled (:disabled pseudo classe).
    • remarque j'ai plusieurs boutons de ce que tu dis fonctionne quand il est seul des boutons
    • Ajouter une classe, par exemple <button class='original-button' [disabled]='item.username === name'></button> et puis dans le css .original-button:disabled.
    • j'ai vérifié n'est toujours pas résolu mon problème
    InformationsquelleAutor Maciej Caputa
  3. 0

    html:

    <button type="button"
        (click)="changestatus(item.username)"
        [disabled]='isDisabled(item)' 
        class="btn btn-success btn-xs">Change Status</button>

    TS : 

    isDisabled(item) : boolean {
 return item && item.username === name;
}
    InformationsquelleAutor Yoav Schniederman