Угловая ссылочная переменная шаблона для переключателей

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

Если у вас всего несколько переключателей, будет работать следующий синтаксис.Он получает значение, связанное с переключателем, который отмечен, с помощью вложенных условных операторов .

<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>

См. этот стек-блиц для демонстрации.