typescript Angular 2：布尔类型无线电输入的 ngModel 绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36802522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: ngModel binding for radio input of boolean type
提问by jerryh91
In Angular 2, I'd like to bind 2 radio button input options in 1 group to a model property of boolean type, however either I'm not able to select one of the radio buttons or running into another incorrect binding issue. I've tried the following in my html.
在 Angular 2 中，我想将 1 组中的 2 个单选按钮输入选项绑定到布尔类型的模型属性，但是我无法选择其中一个单选按钮或遇到另一个不正确的绑定问题。我在我的 html 中尝试了以下内容。
*.component.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:
*.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>
I'm using the following
我正在使用以下
*.component.tsfor all *.component.htmloptions above:
*.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(){}
...
}
回答by Riko
To get your html value to evaluate as a boolean, use: [value]="true"
要让您的 html 值评估为布尔值，请使用： [value]="true"
回答by Picci
In similar cases I use your first version of code with [checked]instead of [ngModel].
在类似的情况下，我使用你的第一个版本的代码[checked]而不是[ngModel].
This code works for 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;
}
回答by sijovw
For boolean, [(ngModel)]is working with [value].
[(ngModel)]fails to checked by default with value.
For eg:
对于布尔值，[(ngModel)]正在使用[value].
[(ngModel)]默认情况下无法使用value. 例如：
<input type="radio"
id="idYes"
name="Preferred-group"
[value]="true"
[(ngModel)]="IsContactPreffered">
works fine.
工作正常。
