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

思想家

我有一个采用布尔值的模型: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;
}

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

我该如何实现?

更新:

在此处输入图片说明

SrAxi

我相信是类型问题:

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

在这里,'true'from的value是字符串类型,而truefrom的模型是booleantype。

您可以通过以下方法解决此问题:

在组件中:

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'"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章