布尔属性的单选按钮

Posted 2023-03-13

【中文标题】布尔属性的单选按钮

【英文标题】：Radio button for boolean property

【发布时间】：2016-11-01 00:51:55

【问题描述】：

我的对象document 中有一个简单的布尔属性valid 并且需要将其绑定到无线电输入。

这是我目前所拥有的：

<input type="radio" name="valid" id="validTrue" (click)="document.valid = true" [checked]="document.valid"/>
<input type="radio" name="valid" id="validFalse" (click)="document.valid = false" [checked]="!document.valid"/>

至少在单击时设置属性有效，但无线电输入不显示其状态。查看浏览器的开发者控制台，我发现设置了一个属性 ng-reflect-checked，但它似乎对 html 单选输入没有影响。

我做错了什么？ 有没有人有一个有效的“angular2-boolean-radio-input”sn-p？

【问题讨论】：

您使用的是哪个 Angular 2 版本

新的 RC.3 表单或已弃用的表单？

对不起...我在 rc3 上使用新表格。

【参考方案1】：

在新的表单模块中，这可能会满足您的需求

  <input type="radio" name="food" [(ngModel)]="document.valid" [value]="true">
  <input type="radio" name="food" [(ngModel)]="document.valid" [value]="false">

另见design doc for the new forms module

【讨论】：

你说得对。就是这么简单。我想我已经尝试过了，但忘记将 vale 属性放在方括号中。

如果没有[]，你会得到true和false作为字符串，我猜这两个值都是JS/TS中的true（不确定，我用得不多）

我尝试过这样做，但我的单选按钮未选中。我需要一个设置为 true 的值默认加载为选中状态，而另一个保持未选中状态。我怎样才能激活这种行为？

使用[value]="false" 可以将布尔文字false 绑定到元素的value 属性和指令/组件的@Input() value:boolean;。如果这样的属性或输入不存在，则会引发异常。使用value="false" 可以将字符串"false" 绑定到value 属性。如果 HTML 元素支持这样的属性，它可能会将其转换为布尔值并将值分配给其属性。如果指令/组件托管在该元素上，则字符串将分配给它value 输入。输入得到一个 string 传递的值。

@DarionN 如果您使用value，则使用普通属性绑定，它始终将值作为字符串传递。使用[value]，它成为一个属性绑定，将所有值作为原始类型传递。对于[]，"..." 中的部分被解释为代码，true 作为布尔值传递，而对于value="true"，"true" 作为字符串传递。在 JS 中"false" 也是真实的，所以使用字符串值这是行不通的。