RadioButton ngmodel 不适用于布尔值

Question

我在 Sample with ngModel 中有两个单选按钮。

<div id="container">
    <input type="radio" id="radiobuttonstoerung1" label="Blinkend" name="stoerungBlinkend" [(ngModel)]="project.modelvalue"
          value="true"/>
    <input type="radio" id="radiobuttonstoerung2"  label="Dauersignal" name="stoerungBlinkend" [(ngModel)]="project.modelvalue"
  value="false"/>
</div>

当我传递布尔变量时，它不起作用。

export class RadioButtonController implements OnInit {
    project = { modelvalue: true };
}

示例 Link: https://stackblitz.com/edit/angular-cxt8bs-quvb7y?file=radiobutton.html

Scenario 当我将 'stoerungBlinkend' 传递为 true 时，应检查值为 "true" 的 RadioButton。如果我将其作为 false 传递，则应检查值为 ="false" 的 RadioButton。

我找到了解决方法，但是谁能详细解释为什么上述情况不起作用？

Answer 1

尝试这样的事情：

你的TS：

    form: FormGroup;
constructor(fb: FormBuilder) {
    this.name = 'Angular2'
    this.form = fb.group({
            gender: ['', Validators.required]
});
}

HTML:

<form [formGroup]="form">
    <input type="radio" value='Male' formControlName="gender" >Male
    <input type="radio" value='Female' formControlName="gender">Female
</form>

Answer 2

如 Angular documentation 中所述，当您使用 value="true" 设置单选按钮值时，您实际上将该值设置为字符串 "true"，即与布尔值 true 不同。

要在输入元素上设置布尔值，请使用属性与 [value]="true" 绑定：

<input type="radio" ... [(ngModel)]="project.stoerungBlinkend" [value]="true" />    
<input type="radio" ... [(ngModel)]="project.stoerungBlinkend" [value]="false" />

有关演示，请参阅 this stackblitz。

RadioButton ngmodel 不适用于布尔值

RadioButton ngmodel not working for boolean values

boolean

radio-button

angular2-ngmodel

angular