在Angular 8中选择单选按钮时将类添加到父div答案

【问题标题】：Add class to parent div when radio button is selected in Angular 8在Angular 8中选择单选按钮时将类添加到父div
【发布时间】：2019-10-15 11:59:47
【问题描述】：

Angular 刚开始不久。

因此，当在 Angular 中选择单选按钮时，我需要向父 div 添加一个类。我被引导相信这可以使用 [ngClass] 甚至使用 [ngSelected] 来实现，但在过去的几天里没有任何运气。

What I think I am looking for is a class to be added to a div when a radio button is selected, I have seen static examples of this but nothing dynamic.

<div id="one">
<id="two">
<input type="radio" /><label>Text 1</label>
</div>
</div>

当单选按钮被选中时，类将被添加到 div 使用 id="one"。这似乎是一件很简单的事情，但我根本不喜欢这个。

谢谢！

【问题讨论】：

您的代码缺少一个 div

标签： angular data-binding

【解决方案1】：

首先，将id=one 设为class=one（将one 设为一个类）。然后使用[clas.classname]="condition"

<div class="one" [class.myClass]="isChecked">
  <div id="two">
     <input id="radio" type="radio" (change)="checked($event)">
  </div>
</div>

最后在.ts 文件中，isChecked = checkbox.checked;

看到这个working demo

【讨论】：

哈鲁努尔太棒了！出于兴趣，如果我想要多个单选按钮，并且只将背景更改为已选中的单选按钮，我将如何处理？
然后你必须跟踪使用 id 属性检查了哪个单选按钮。看到这个https://stackoverflow.com/questions/53294631/how-can-i-bind-event-of-one-or-more-arithmatic-operation-to-checkbox/53294782#53294782
我确信这可行，但我被要求以 Angular 方式完成此任务。不过感谢链接！

【解决方案2】：

你可以这样做

<div [className]="condition ? 'example-class' : 'other-class'"></div>

请参阅此链接了解更多详情： Class Binding in Angular

【讨论】：

【解决方案3】：

你可以这样做：

addClass = false;

radioChanage(event) {
 this.addClass = true;
 }

在模板中。

<div id="one" [ngClass]="{'className' : addClass}">
<id="two">
<input type="radio" (change)="radioChanage($event)" /><label>Text 1</label>
</div>
</div>

【讨论】：

【解决方案4】：

试试这个

<div id="one" [class.newClass]="radioBtn">
    <div id="two" >
        <input type="radio" [ngModel]="radioBtn" /><label>Text 1</label>
    </div>
</div>

【讨论】：

【解决方案5】：

在你的组件中

selected: string = '';

在你的 html 中

<div id="one" [ngClass]="{'myClass': selected == 'one'}">
    <div id="two">
        <input type="radio" value="one" [(ngModel)]="selected" /><label>Text 1</label>
    </div>
</div>

问候

【讨论】：