Angulaire 2 changer le style d'un bouton onClick
J'ai beaucoup de mal à essayer de mettre à jour le style d'un bouton sur cliquez sur.
Tout d'abord, voici le balisage original:
<button class="btn btn-add" (click)="handleButtonClick(id)">
Add<i class="fa fa-plus-circle"></i>
</button>
En cliquant sur le bouton, je suis en train d':
- Changer la classe de
"btn btn-add"
à"btn btn-remove"
- Changer le
<i class="fa fa-plus-circle">
à<i class="fa fa-minus-circle">
Comment puis-je faire cela l'angle de 2 voies? Droit maintenant, j'ai juste ajouté un booléen et périlleux, et de montrer les différents modèles basés sur la valeur. Cependant, il semble qu'il devrait être un moyen de gérer ce à travers une fonction de droite? Dans la documentation il est dit que vous pouvez utiliser des chaînes séparées par un espace pour plusieurs classes, mais je ne suis pas sûr de la façon de le faire.
Avez-vous au moins essayé quelque chose? Ou a pris un coup d'oeil à la documentation?
ouais j'ai regardé la documentation de angulaire.io/docs/ts/latest/api/common/index/.... Il dit que u peut utiliser plusieurs classes délimité par l'espace, mais je ne pouvais pas obtenir que cela fonctionne 🙁
ouais j'ai regardé la documentation de angulaire.io/docs/ts/latest/api/common/index/.... Il dit que u peut utiliser plusieurs classes délimité par l'espace, mais je ne pouvais pas obtenir que cela fonctionne 🙁
OriginalL'auteur user1354934 | 2016-09-11
Vous devez vous connecter pour publier un commentaire.
Dans votre commentaire, vous l'avez dit, que vous avez essayé
ngClass
mais avait de la difficulté avec elle:La directive prévoit un objet avec le nom de classe comme la clé et une expression booléenne de la valeur. Si l'expression est vraie, l'ajout de la classe, sinon il sera supprimé.
Par exemple votre bouton a la classe
btn
et devraient avoirbtn-add
oubtn-remove
selon une valeur booléenne que vous n'avez probablement quelque chose comme ceci:Espère que cela vous aide dans votre compréhension de
ngClass
, alors il ne sera pas un problème pour une utilisation sur vos autres usecases.Eh bien c'est une autre question :). Sans aucun exemple de code il est difficile de donner une réponse. Il est possible, bien sûr, par exemple, si vous parlez d'un
ngFor
: au lieu d'utiliser une propriété du composant, vous pouvez utiliser une propriété de votre photo-objet directement à décider à quelle classe le bouton doit avoir.thx. je pense que je vais ajouter que, dans redux comme un drapeau en cliquant sur ajouter, ajoutée = true
Voici une question similaire, avec une réponse de moi: stackoverflow.com/questions/39439059/... C'est angular1 et sur ngClick, mais le concept est le même. Fondamentalement, vous itérer sur certains objets et dans votre objet vous utilisez une sorte de drapeau.
OriginalL'auteur lexith
Pour basculer le texte du bouton:
OriginalL'auteur Stacked
Vous pouvez essayer ce code:
OriginalL'auteur yurzui
Au lieu d'utiliser une variable booléenne comme un contrôleur de ce type de fonctionnalité, vous pouvez transmettre l'événement à une fonction de sorte que vous pouvez obtenir une référence à l'élément et c'est classlist et de les manipuler comme vous le souhaitez.
Vous modèle devrait ressembler à cela:
et ajouter ceci dans votre classe:
OriginalL'auteur Antonis