Dev Faq
0
votes

Comment décocher toutes les cases cochées sur Angular 6

J'ai une liste dynamique de données et chaque élément est indiqué comme case à cocher. Les éléments que j'ai vérifiés sont enregistrés dans un tableau. Après avoir enregistré le tableau, je veux que toute la case à cocher vérifiée soit décochée lorsque j'appuie sur un bouton, mais cela ne fonctionne pas.

Je veux décocher la case sélectionnée après avoir enregistré le tableau. Aidez-moi s'il vous plaît à trouver une solution. Merci. P>

Lien Stackblitz ici P>

TS Fichier: H3> 
<h1>Unchek All Roles</h1>

 <div class="form-check" *ngFor="let appUserRole of appUserRoleList">

 <input class="form-check-input" name="{{appUserRole.roleName}}" 
   type="checkbox" id="{{appUserRole.roleName}}" 
   (change)="onChangeRole(appUserRole.roleName, $event)">

 <label class="form-check-label" for="{{appUserRole.roleName}}">
  {{appUserRole.roleName}}
 </label> 

</div>
<button (change)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

3 commentaires

Si vous utilisez des formes réactives angulaires, une boucle sur toutes les commandes de la case à cocher et non définissez la valeur.

Il y a deux approches pour cela. Modifiez vos données et ajoutez une propriété que vous attacherez à la propriété cochée . Ou utilisez une variable de modèle pour vos cases à cocher et d'y accéder dans votre fichier .TS. Je crois que les deux options ont été mentionnées dans les réponses. Il suffit de choisir celui que vous êtes à l'aise!

@monir, pourquoi ne pas utiliser [(Ngmodel)] C'est plus facile, voir ma réponse

4 Réponses :

1
votes

première erreur que vous avez faite est que vous ajoutez (changement) code> événement sur le bouton Cliquez sur. Remplacez-le par (click) code> comme modification événement si pour les propriétés de type d'entrée et vous ne pouvez l'utiliser que avec ngmodel strong> .

Vous devez ajouter ischecked code> propriété intérieure AppuserErrolelist Code> Liste, ce qui vous aidera à vérifier / Décochez la case à cocher. Essayez ceci: p> 

  appUserRoleList: any = [
        {id: '1', roleName: 'SETUP_ROLE', isChecked: true},
        {id: '2', roleName: 'ENTRY_ROLE', isChecked: false},
        {id: '3', roleName: 'SEATPLAN_ROLE', isChecked: true},
        {id: '4', roleName: 'MARKSENTRY_ROLE', isChecked: true},
        {id: '5', roleName: 'APPLICANT_ROLE', isChecked: true}
    ];

0 commentaires
2
votes

Utilisez une variable de modèle pour obtenir la liste des cases à cocher: xxx

puis dans votre composant à l'aide de @viewchild Obtenez une prise de tous les ellementfr et les traiter en définissant la propriété cochée sur false : xxx

Ceci est votre modifiée Stackblitz

0 commentaires
2
votes

Voici le lien HTTPS: // Stackblitz .com / edit / angulaire-me1cdb? fichier = src / app / app.component.html

J'utilise ischecked code> drapeau il vous aidera P> 

<h1>Unchek All Roles</h1>

<div class="form-check" *ngFor="let appUserRole of appUserRoleList">

  <input class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" [checked]="appUserRole.isChecked" (change)="onChangeRole(appUserRole.roleName, $event)">

  <label class="form-check-label" for="{{appUserRole.roleName}}">
      {{appUserRole.roleName}}
  </label> 

</div>

<button (click)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

0 commentaires
1
votes

Pourquoi ne pas utiliser [(ngmodel)] ?? Non (changement), pas de scission. Maintenir le code simple. Voir Stackblitz xxx

Pour obtenir le tableau, j'aime un getter xxx

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO