Angular 2：用于布尔类型无线电输入的 ngModel 绑定答案

【问题标题】：Angular 2: ngModel binding for radio input of boolean typeAngular 2：用于布尔类型无线电输入的 ngModel 绑定
【发布时间】：2016-08-16 14:21:10
【问题描述】：

在 Angular 2 中，我想将 1 个组中的 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.ts 用于上述所有 *.component.html 选项：

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

      ...
}

【问题讨论】：

标签： typescript angular

【解决方案1】：

要将您的 html 值评估为布尔值，请使用：[value]="true"

【讨论】：

【解决方案2】：

在类似的情况下，我使用[checked] 而不是[ngModel]。

此代码适用于我：

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

【讨论】：

模型属性值是否正确，具体取决于它们选择了哪些单选按钮，但在视觉上，单击时单选按钮并未始终被选中。
此代码适用于我 <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 也适合我。有时，有一个有效的代码比一个符合规范的代码更好。

【解决方案3】：

对于布尔值，[(ngModel)] 与 [value] 一起使用。默认情况下，[(ngModel)] 无法使用 value 进行检查。例如：

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

工作正常。

【讨论】：