Question

我移植了一些代码，其中单选按钮状态绑定到布尔值并手动管理。我不想重写代码来管理共享的字符串值（通过ngModel），只是想将一个布尔值绑定到＆＃34;检查＆＃34;属性并控制我的代码中的已检查状态。有时我需要拒绝选择，并在点击后取消选中单选框。

以编程方式取消选中一个单选按钮，使用常规ol＆＃39; Javascript（plunker）：

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

这会导致无法检查单选按钮。

但是在Angular 2中将布尔值绑定到[checked]简单不起作用（plunker）：

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

无关紧要＆＃34; radioChecked＆＃34;有（这里硬编码为假）;如果单击单选按钮，则会进行检查。

我在这里做错了吗？

Answer 1

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

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

然后在您的组件中，您可以更改其值：

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

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

将广播绑定到Angular 2

1 个答案: