在Angular 2中将收音机绑定到[选中]答案

【问题标题】：Binding radio to [checked] in Angular 2在Angular 2中将收音机绑定到[选中]
【发布时间】：2017-03-23 13:01:28
【问题描述】：

我正在移植一些单选按钮状态绑定到布尔值并手动管理的代码。我不想重写代码来管理共享的 string 值（通过 ngModel），只想将布尔值绑定到“checked”属性并控制代码中的选中状态。有时我需要拒绝选择，并在单击后取消选中单选框。

使用常规 ol' Javascript (plunker) 以编程方式取消选中单选按钮可以正常工作：

<input type="radio" id="radioButton" onclick="uncheckRadioButton()">
<script>
  function uncheckRadioButton() {
     document.getElementById("radioButton").checked = false;
  }
</script>

这会导致无法选中的单选按钮。

但在 Angular 2 simple 中将布尔值绑定到 [checked] 不起作用 (plunker)：

  <input type="radio" [checked]="radioChecked" (click)="onRadioClicked()">

“radioChecked”的值无关紧要（这里它被硬编码为 false）；如果您单击单选按钮，它会被选中。

我在这里做错了吗？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

您可以将模板变量添加到您的单选输入元素，以便您可以在组件中获取对它的引用并更改值：

<input type="radio" #myRadio (click)="onRadioClicked()">

然后在你的组件中你可以改变它的值：

onRadioClicked(myRadio: any) {
    myRadio.checked = false;
}

这是工作Plunker。由于某种原因，无法使用属性绑定来更改无线电输入的值，我不知道为什么。

【讨论】：