angular2 case ng-model pas mis à jour

Je suis en train d'essayer une chose simple avec Angular 2.0
Je veux lier un modèle à une "entrée case, inscrivez le "changement" avec une méthode, ont la méthode exécutée lorsque la case à cocher de l'etat est modifiée et de la loi sur la fonction de l'état du modèle.
Tout fonctionne, mais, lorsque la méthode liée à l'événement change est exécutée, l'état du modèle est le contraire de ce que j'attends, c'est à dire la valeur false lorsque la case est cochée, est vrai si la case n'est pas cochée.
Voici l'extrait de code;

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange(object.selected)">

La moindre idée de ce que je fais de mal?

Première question sur stackoverflow. Impossible de coller un extrait de code html.
vous pouvez coller le code brut de toute façon
collez le code sélectionné et cliquez sur l'icône du code de
"'<input value={{objet.name}} type="checkbox" [(ng-model)]="l'objet.sélectionné" (modifier)="onChange(objet.sélectionné)">'"
merci, maintenant le code est visible dans les questios
C'est simple: vous modifiez votre question, vous collez le code, vous le sélectionnez et vous appuyez sur la touche Ctr-K (ou cliquez sur le bouton de la barre d'outils pour "code", qui ressemble à ceci: {}.
Je vous recommande d'utiliser ng-cliquez sur insted ng-changement de sorte que le onChange() vérifie si le a Vrai ou Faux et de le modifier

InformationsquelleAutor Picci | 2015-12-20

angular checkbox

46

De angular2.beta8 cette simple astuce va faire
```
<input type="checkbox" [(ngModel)]="object.selected" />
```
Angulaires 4, il faut rajouter la name attribut pour que cela se lier.
```
<input type="checkbox" [(ngModel)]="object.selected" name="element_name"/>
```
- À utiliser avec Angular4 j'ai dû ajouter de la propriété "name" dans le champ de saisie.
InformationsquelleAutor Anderson Fortaleza
25

Un moyen de le faire sans ngModel
```
<input
    id="{{fieldId}}"
    type="checkbox"
    [checked]="displayValue"
    (click)="setDisplayValue($event.target.checked)"
>
```
displayValue serait getter/setter
setDisplayValue() méthode de mise à jour de l'enregistrement, et donc displayValue serait mis à jour

InformationsquelleAutor Nugu
14

Pour moi ne fonctionne que lorsque j'ai utilisé (ngModelChange):
```
<input type="checkbox" 
       [(ngModel)]="object.selected" 
       (ngModelChange)="onChange(object.selected)">
```
Si j'utilise (change) ou (click) l'état est toujours le contraire de ce que j'attends, comme vous l'avez dit
- Testé comme de Angular2 RC.4. Fonctionne parfaitement.
- Semble comme l'événement de changement de feux sur les changements dans les DOM, et la ngModelChange se déclenche lorsque la propriété de l'objet de modifications. Donc, lors de la lecture de la propriété de l'objet sur l'événement de changement, il n'a pas encore été mis à jour à la valeur de la DOM.
InformationsquelleAutor Kayo Lima
9

J'ai mis en œuvre comme ceci:
<input #angularcb type="checkbox" (change)="angular = angularcb.checked" />

Vous pouvez aussi voir plus de détails et une démo en live ici: http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0
http://www.syntaxsuccess.com/angular-2-samples/#/demo/input
- et si nous devons générer des cases à cocher avec *ngFor ?
InformationsquelleAutor TGH
6

HTML:
```
<input type="checkbox" [ngModel]="object.selected == 'Y'" (ngModelChange)="object.selected=$event?'Y':'N'"> 
```
- Une explication pourrait aider les autres à comprendre la meilleure solution.
- Merci pour l'aide. Peut-être que je peux expliquer. [NgModel] a un sens univoque de liaison avec la comparaison de la valeur, juste pour faire de case à cocher apparaissent comme cochée ou décochée. Dans (NgModelChange) vous définissez la valeur sur le modèle.
InformationsquelleAutor user3501373
4

Vous pouvez également essayer et d'inspecter l'objet d'événement et il suffit de tirer le vérifiée paramètre
```
<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange($event)">


 onChange(event) {
  var isChecked = event.currentTarget.checked;
 }
```
- semble que l'événement est déclenché avant que le modèle a une chance de le mettre à jour. Actuellement, il fonctionne très bien pour mon sélectionner des éléments.
- J'ai remarqué que l'événement est déclenché avant la mise à jour du modèle ainsi.
- juste pour la référence scotch.io/tutoriels/...
InformationsquelleAutor MANNY_THE_GREAT

essayer

app.html

 <span *ngFor="#ca of classArray; #i=index">                                         
   <input type="checkbox"  id="{{ca.id}}" #cv [checked]=false                                       
    (change)="onChange(ca.id,cv.checked)">
         {{ca.class_name}},{{cv.checked}} <br>
 </span>

app.ts

 onChange(classId,flag){
        console.log(classId+" : "+flag);
   }

InformationsquelleAutor Mubashir

Essayer comme ça.

<input type="checkbox" [checked]="object.completed" (change)="object.completed = !objected.completed" >

InformationsquelleAutor dacharjaya

2

N'oubliez pas d'inclure un nom ou la case à cocher ne sera pas mise à jour et vous obtiendrez un message d'erreur sur la console.
```
<label>Sign on<input type="checkbox" name='showLogin2' [(ngModel)]="model.ShowLogin" ></label>
```
InformationsquelleAutor oo Waratah
2

Angulaire 2.x.x stable :
moyen facile de savoir qu'une case est cochée ou non :
```
<input type="checkbox" #checkbox (change)="check(checkbox.checked)">
```
ts:
```
export class component{
  constructor() {}

  check(checked){

    if(checked){
      //checked
    }else{
      //not checked
    }
  }
```
- Serait plus robuste pour utilisation (changement)="check($event)", puis cochez() la méthode dispose de l'accès à la propriété checked, ainsi que toutes les autres propriétés - de plus, vous n'avez pas besoin de mettre en œuvre la #espion.
InformationsquelleAutor Bougarfaoui El houcine
0

il suffit d'écrire vérifié dans la balise de type d'entrée :
```
<input type="checkbox" name="abc" checked />
```
InformationsquelleAutor user7527662

HTML:

<input type="checkbox" [(ngModel)]="object.selected" />
<div>{{object | json}}</div>

InformationsquelleAutor Shiraj Momin

Entrée

<input type="checkbox" (change)="selectionChange($event.srcElement)">

Événement De Changement De

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}

InformationsquelleAutor Dblock247

Vous devez vous connecter pour publier un commentaire.