Question

在Angular 2中，我想将1组中的2个单选按钮输入选项绑定到布尔类型的模型属性，但要么我不能选择其中一个单选按钮或者遇到另一个错误的绑定问题我在我的HTML中试过以下内容。

my[10]：

*.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

Answer 1

在类似的情况下，我使用您的第一版代码[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; 
}

Answer 2

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

Answer 3

对于布尔值，[(ngModel)]正在使用[value]。默认情况下[(ngModel)]未value检查<input type="radio" id="idYes" name="Preferred-group" [value]="true" [(ngModel)]="IsContactPreffered">。例如：

var aArray = [ { title: 'Abc', price: '1,200' }, { title: 'def', price: '900' } ]
var bArray = [ { title: 'def', price: '900', other: 'someDetail' }, { title: 'Abc', price: '1,200', other: 'someDetail' } ]

var aTitle = aArray.map(item => item.title);
var bTitle = bArray.map(item => item.title);

expect(aTitle).eql(bTitle)

工作正常。

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

3 个答案: