Liaison de données angular à deux cases à cocher

Je suis assez nouveau pour Angular2 et j’ai un petit problème:

Dans mon Login-Component-HTML, j’ai deux cases à cocher, que je souhaite lier de manière bidirectionnelle à l’object Login-Component-TypeScript.

Ceci est le HTML:

Et c’est le Component.ts:

 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Variables } from '../../services/variables'; @Component({ selector: 'login', moduleId: module.id, templateUrl: 'login.component.html', styleUrls: ['login.component.css'] }) export class LoginComponent implements OnInit { private saveUsername: boolean = true; private autoLogin: boolean = true; constructor(private router: Router, private variables: Variables) { } ngOnInit() { this.loginValid = false; // Hole Usernamen aus Local Storage falls gespeichert werden soll if (window.localStorage.getItem("username") === null) { this.saveUsername = true; this.autoLogin = true; console.log(this.saveUsername, this.autoLogin); } else { console.log("init", window.localStorage.getItem("username")); } } login(username: ssortingng, password: ssortingng, saveUsername: boolean, autoLogin: boolean) { this.variables.setUsername(username); this.variables.setPassword(password); this.variables.setIsLoggedIn(true); console.log(saveUsername, autoLogin); //this.router.navigate(['dashboard']); } 

Si je clique sur une case à cocher, j’obtiens la valeur correcte dans le contrôleur (composant).

Mais si je modifie la valeur de par exemple saveUsername dans le composant, la case à cocher n’a pas “obtenu” la nouvelle valeur.

Je ne peux donc pas manipuler la case à cocher du composant (comme je veux le faire dans le composant ngOnInit .

Merci de votre aide!

vous pouvez supprimer .selected de saveUsername dans votre case à cocher car saveUsername est un booléen. au lieu de [(ngModel)] use [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Edit: Solution correcte:

  

Malheureusement, la solution fournie par @hakani n’est pas une liaison bidirectionnelle . Il se contente de gérer le modèle à changement unidirectionnel à partir de la partie UI / FrontEnd.

Au lieu du simple:

  

fera une liaison bidirectionnelle pour la case à cocher.

Par la suite, lorsque Model checkboxFlag est modifié à partir du composant Backend ou UI – voila, checkboxFlag stocke l’état actuel de la case à cocher.

Pour être sûr d’avoir préparé le code Plunker pour présenter le résultat: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Pour compléter cette réponse, vous devez inclure l’ import { FormsModule } from '@angular/forms' dans app.module.ts et l’append au tableau imports, c’est-à-dire

 import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] }) 

Je travaille avec Angular5 et j’ai dû append l’atsortingbut “name” pour que la liaison fonctionne … L’identifiant n’est pas requirejs pour la liaison.

  

Pass $ event comme un autre paramètre et dans la fonction que nous pouvons obtenir, les entrées sont vérifiées ou non par $ event.target.checked

Je préfère quelque chose de plus explicite:

component.html

  

composant.ts

 public saveUsername:boolean; public onSaveUsernameChanged(value:boolean){ this.saveUsername = value; } 

En utilisant la syntaxe sur angular.

Cela se traduit par:

Ce qui signifie que votre composant doit avoir:

 @Input() bar; @Output() barChange = new EventEmitter(); 

Vous pouvez simplement utiliser quelque chose comme ceci pour avoir une liaison de données bidirectionnelle:

  

Pour que la case à cocher fonctionne, vous devez suivre toutes les étapes suivantes:

  1. importer FormsModule dans votre module
  2. Placez l’entrée dans une balise de form
  3. votre entrée devrait être comme ceci:

      

    Note: n’oubliez pas de mettre le nom dans votre saisie.

J’ai fait un composant personnalisé essayé de liaison bidirectionnelle

Mycomponent:

 _model: boolean; @Output() checked: EventEmitter = new EventEmitter(); @Input('checked') set model(checked: boolean) { this._model = checked; this.checked.emit(this._model); console.log('@Input(setmodel'+checked); } get model() { return this._model; } 

chose étrange est que cela fonctionne

  

alors que ce ne sera pas

  

Vous devez append l’atsortingbut name="selected" à input élément en input .

Par exemple: