javascript - 单选按钮的 Angular 模板引用变量

Question

我知道这件事:

<input type="text" #inp>
<button type="button" (click)="onClick(inp.value)">Click</button>

因此，我无需使用 ngModel 指令即可获得输入到文本框中的值。

是否有任何类似的方法可以在不使用 ngModel 的情况下使用单选按钮？

<input type="radio" value="selected" name="viewType">Selected
<input type="radio" value="unselected" name="viewType">Unselected
<input type="radio" value="both" name="viewType">Both

在这些单选按钮下方有一个刷新按钮，如下所示:

<button (click)="refreshView()">Refresh</button>

这些 html 输入元素不是任何表单标签的一部分。我想要的是使用参数调用“refreshView”函数 - 选定的单选按钮值。

这可能吗？

Answer 1

如果您只有几个单选按钮，则可以使用以下语法。在嵌套 conditional operators 的帮助下，它获取与选中的单选按钮关联的值。 .

<input #rad1 type="radio" value="selected" name="viewType" >Selected
<input #rad2 type="radio" value="unselected" name="viewType" >Unselected
<input #rad3 type="radio" value="both" name="viewType" >Both

<button (click)="refreshView(rad1.checked ? rad1.value : rad2.checked ? rad2.value : rad3.checked ? rad3.value : null)">Refresh</button>

参见 this stackblitz用于演示。