Angolare 2: ngBodel di collegamento per ingresso radio di tipo booleano

Question

In Angular 2, vorrei associare 2 opzioni di input per pulsante di opzione in 1 gruppo a una proprietà di modello di tipo booleano, tuttavia non sono in grado di selezionarne uno dei pulsanti di opzione o l'esecuzione di un altro problema di associazione non corretto. Ho provato quanto segue nel mio html.

*.component.html:

Error: myModel.modelProperty is always: false, no matter which radio button is selected. 

<div class="form-group"> 
     <label for="modelProperty">Model Property: </label> 
     <form action=""> 
      <input type="radio" [ngModel]="_model.modelProperty" (click)="_model.modelProperty=true" name="modelProperty" value=true>Yes<br> 
      <input type="radio" [ngModel]="_model.modelProperty" (click)="_model.modelProperty=false" name="modelProperty" value=false>No 
     </form> 
</div> 

<div>{{_model.modelProperty}}</div> 

*.component.html:

Error: myModel.modelProperty is [Object object], only No radio button can be selected, if either Yes or No radio buttons is clicked. 

<div class="form-group"> 
      <label for="modelProperty">Model Property: </label> 
      <form action=""> 
       <input type="radio" [(ngModel)]="_model.modelProperty" name="modelProperty" ngValue=true>Yes<br> 
       <input type="radio" [(ngModel)]="_model.modelProperty" name="modelProperty" ngValue=false>No 
      </form> 
    </div> 

    <div>{{_model.modelProperty}}</div> 

Sto utilizzando il seguente

*.component.ts per tutti *.component.html opzioni di cui sopra:

import {Component, Input} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
import {Model} from './model'; 
@Component({ 
    selector: 'my-form', 
    templateUrl: 'app/.../*.component.html' 
}) 

export class *Component { 

     _model = new Model(..., false, ...); //false is the Model property: .modelProperty 

     constructor(){} 

     ... 
} 

Answer 1

In casi simili utilizzo la prima versione di codice con [checked] anziché [ngModel].

Questo codice funziona per me:

<form action=""> 
    <input type="radio" [checked]="_model.modelProperty" 
     (click)="setProperty($event.target.checked)" 
     name="modelProperty">Yes<br> 
    <input type="radio" [checked]="!_model.modelProperty" 
     (click)="setProperty(!$event.target.checked)" 
     name="modelProperty">No 
</form> 

setProperty(inChecked: boolean) { 
    this._model.modelProperty = inChecked; 
} 

Answer 2

per ottenere il vostro valore html per valutare come un valore booleano, uso: [value]="true"

Answer 3

Per booleano, [(ngModel)] sta lavorando con [value]. [(ngModel)] non viene controllato per impostazione predefinita con value. Ad esempio: - <input type="radio" id="idYes" name="Preferred-group" [value]="true" [(ngModel)]="IsContactPreffered"> funziona correttamente.