单选按钮的角度模板引用变量

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 以获取演示。