在Angular 12中更改选定收音机的标签背景答案

【问题标题】：Change label background of selected radio in Angular 12在Angular 12中更改选定收音机的标签背景
【发布时间】：2021-08-27 16:56:27
【问题描述】：

在以下示例中检测选择了哪个无线电的最佳方法是什么？

<label for="apple">
    <input id="apple" type="radio" name="fruits" value="apple" class=""/>
    <span>Apple </span>
    <SomeComponent>
</label>
<label for="mango"> 
   <input id="mango" type="radio" name="fruits" value="apple" class=""/>
   <span>Mango </span>
   <AnotherComponent>    
</label>

我希望能够使用 ngClass 为所选标签添加背景。我还可以将该变量用于其他事情（例如在示例中禁用“SomeComponent”或“AnotherComponent”。

【问题讨论】：

标签： angular radio-group angular12

【解决方案1】：

只需在每个收音机的更改事件触发时更新一个变量，然后使用 ngClass 根据变量的值将背景颜色应用于每个标签。

这里有一个例子：Stackblitz

【讨论】：

感谢您的回复，这是一个足够简单的方法。我想如果我需要另一个单选框，那么可以使用 ngFor 来跟踪索引以及选择了哪个。