angular2将模型值绑定到单选按钮

Question

我有一个采用布尔值的模型：rational_thinker: boolean;我通过无线电框从我的前端设置它的值如下：

<label #radio class="my-radio-label mdl-radio mdl-js-radio mdl-js-ripple-effect">
<input #btn1 type="radio" value='true' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn1.value)">
    <span class="mdl-radio__label">True</span>
</label>

<label #radio class="my-radio-label mdl-radio mdl-js-radio mdl-js-ripple-effect">
<input #btn2 type="radio" value='false' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn2.value)">
    <span class="mdl-radio__label">False</span>
</label> 

和设置值的方法：

getRationalThinker(value){
    this.rational_thinker=value;
}

初始保存后，该值存储在我的后端，当我再次检索它时，我希望预先选择相应的单选按钮，此时它显示为空白。

我怎样才能做到这一点？

更新

Answer 1

使用[value]='true'和[value]='false'。

如果使用vanilla value='true'，则属性的内容不会被角度解释，而是被视为字符串。这样，你就有一个字符串＆＃34; true＆＃34;这并不严格等于布尔值true（我假设你的模型来自服务器）。

使用[value]代替角色将内容解释为代码，因此如果内容为 true 或 false ，则会被视为布尔值并与您的模型匹配（因此可以正确预选）。

编辑：用[值]切换[ngValue]作为[ngValue]似乎只适用于选择元素...

Answer 2

我认为这是一个类型问题：

value='true' [(ngModel)]='rational_thinker'

此处，'true'中的value为字符串类型，而模型中的true为boolean类型。

您可以通过以下方式解决此问题：

在组件中

public rationalThinkerModel: boolean = true; 

在模板中：

<input #btn1 type="radio" value='rationalThinkerModel' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn1.value)">
    <span class="mdl-radio__label">True</span>
</label>

<input #btn2 type="radio" value='!rationalThinkerModel' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn2.value)">
    <span class="mdl-radio__label">False</span>
</label>

<强>更新

请尝试添加此内容：

[checked]="(rational_thinker === true) ? 'true' : 'false'"