Angular 2: 布尔类型单选输入的ngModel绑定

Question

在Angular 2中，我想将一个组内的两个单选按钮绑定到布尔类型的模型属性，但是我要么不能选择其中一个单选按钮，要么遇到另一个不正确的绑定问题。我在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>

我使用以下代码用于所有*.component.html选项：*.component.ts。

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(){}

      ...
}

- jerryh91

Answer 1

为了使您的html值作为布尔值进行评估，请使用：[value]="true"

- Riko

Answer 2

在类似的情况下，我使用您的第一个代码版本，而不是[ngModel]，而是[checked]。

以下是代码示例：

<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; 
}

- Picci

---

模型属性值是正确的，取决于他们选择哪个单选按钮，但在视觉上，单选按钮在点击时并不一致地被选中。 - jerryh91

这段代码对我有效：<form action=""> <input type="radio" [checked]="_model.modelProperty" (click)="setProperty($event.target.checked)" name="modelProperty">是<br> <input type="radio" [checked]="!_model.modelProperty" (click)="setProperty(!$event.target.checked)" name="modelProperty">否 </form>，其中 setProperty(inChecked: boolean) { this._model.modelProperty = inChecked; }。 - Picci

@Picci 对我也有效。有时候，拥有一个能够工作的代码比遵守规范更重要。 - Ulysses Alves

Answer 3

对于布尔类型，[(ngModel)] 与 [value] 协同使用。 但是默认情况下，[(ngModel)] 无法与 value 一起被选中。 例如：

<input type="radio" 
   id="idYes" 
   name="Preferred-group" 
   [value]="true" 
   [(ngModel)]="IsContactPreffered"> 

正常运作。

- sijovw