Jquery 如何在angular中添加单选按钮LI标记的类父级？

我正在寻找将此jquery代码转换为angular的帮助

if($('#radioid li input:checked')){
 $(this).parent().addClass("active_radio");
}

$('#radioid input').on('change', function(){
   $("#radioid li").removeClass("active_radio");
   if($('input:checked')){
    $(this).parent().addClass("active_radio");
   }
});

<ul id = "radioid">
   <li><input type="radio" name="color" >red</li>
   <li><input type="radio" name="color" >blue</li>
   <li><input type="radio" name="color" >green</li>
</ul>

if（$（'#放射性数据输入：选中'））{
$（this）.parent（）.addClass（“活动_无线电”）；
}
$（'#radiod input'）。on（'change'，function（）{
$（“#radiod li”）.removeClass（“主动无线电”）；
如果（$（'input:checked'））{
$（this）.parent（）.addClass（“活动_无线电”）；
}
});

红色的
蓝色的
绿色的

---

我希望这段jquery代码能够帮助您使用ts文件，因为您需要ngClass和ngModel来解决您的问题

[（ngModel）]

将单选按钮值绑定到颜色和

[ngClass]

以动态添加您的类

<ul id = "radioid">
   <li [ngClass]="{'active_radio': color.value === 'red'}"><input type="radio" name="color" value="red" [(ngModel)]="color">red</li>
   <li [ngClass]="{'active_radio': color.value === 'blue'}"><input type="radio" name="color" value="blue" [(ngModel)]="color" >blue</li>
   <li [ngClass]="{'active_radio': color.value === 'green'}"><input type="radio" name="color" value="green" [(ngModel)]="color" >green</li>
</ul>

红色
蓝色
绿色

使用app.component.html页面中的无线电输入添加value=“example”，（更改）事件和ngClass

红色


蓝色


绿色