更改 Angular 12 中所选收音机的标签背景

Question

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

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

Answer 1

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

这里有一个例子：Stackblitz

更改 Angular 12 中所选收音机的标签背景

Change label background of selected radio in Angular 12

angular

radio-group

angular12