Css 在Angular 8应用程序中将多个条件应用于复选框时出现问题

在我的表格中，我有四个3表示选项，1表示设置计划复选框，要求如下：

如果所有三个选项都选中，则“设置计划”将自动选中，并且这些选项将消失 如果选中“设置计划”，其他选项也会自动选中，然后消失 如果取消选中“设置计划”，则其他选项将再次显示并取消选中 在下面的代码中，1和2>3可以正常工作，但1>3不起作用。如果未选中“设置计划”复选框，则不会返回选项。我的代码中缺少什么？这里可能没什么困难，但我会感谢你的建议

下面是一个简单的示例，描述了问题和复制的源代码

真正的代码有一些动画，所以在消失之前检查需求2的所有选项是很重要的

HTML

CSS并不重要

.container-wrap {
  height: 120px;
  position: relative;
  overflow-y: hidden;
}
.container-wrap.-hidden {
  height: 0px;
  position: relative;
}
.option {
  background-color: lightgray; 
  width: 50%
}

---

我不知道你为什么要做这么多工作。最好的方法可能是使用*ngIf指令

试试这个， 对于组件html：

<div *ngIf="!setPlan" class="container-wrap">
<div class="option">Option One
<input type="checkbox" [(ngModel)]="opt01" [checked]="setplan"/>
</div><br />
<div class="option">Option Two
<input type="checkbox" [(ngModel)]="opt02" [checked]="setplan"/>
</div><br />
<div class="option">Option There
<input type="checkbox" [(ngModel)]="opt03" [checked]="setplan"/>
</div>
</div><br>

<div style="background-color: lightgreen; width: 50%">Set Plan
<input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03"/>
</div>

现在您根本不需要setClass函数。 而且没有额外的课程。所以更干净的代码。

---

还可以使用*ngIf指令设置角度组件模板的动画。对于这一点，一个博客的例子是

，我不知道你为什么要做这么多工作。最好的方法可能是使用*ngIf指令

试试这个， 对于组件html：

<div *ngIf="!setPlan" class="container-wrap">
<div class="option">Option One
<input type="checkbox" [(ngModel)]="opt01" [checked]="setplan"/>
</div><br />
<div class="option">Option Two
<input type="checkbox" [(ngModel)]="opt02" [checked]="setplan"/>
</div><br />
<div class="option">Option There
<input type="checkbox" [(ngModel)]="opt03" [checked]="setplan"/>
</div>
</div><br>

<div style="background-color: lightgreen; width: 50%">Set Plan
<input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03"/>
</div>

现在您根本不需要setClass函数。 而且没有额外的课程。所以更干净的代码。

---

还可以使用*ngIf指令设置角度组件模板的动画。为此，一个示例博客是

，您可以为setplan输入元素添加ngModelchange以处理更改事件

`<div style="background-color: lightgreen; width: 50%">Set Plan
 <input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03" 
         (ngModelChange)="changePlan($event)"/>
 </div>`

---

您可以为setplan输入元素添加ngModelchange以处理更改事件

`<div style="background-color: lightgreen; width: 50%">Set Plan
 <input type="checkbox"  [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03" 
         (ngModelChange)="changePlan($event)"/>
 </div>`

---

您是否检查了浏览器开发工具在取消选中setplan复选框时是否切换了类名？您是否检查了浏览器开发工具在取消选中setplan复选框时是否切换了类名？实际上，设置多个类的原因是因为我们的设计团队已经提前准备好，并且他们希望保留它。不过，你的解决方案应该有效，我一定会尝试。也许我能说服我们的设计师改变主意；实际上，设置多个类的原因是因为我们的设计团队已经提前准备好了，他们想保留它。不过，你的解决方案应该有效，我一定会尝试。也许我能说服我们的设计师改变主意；谢谢，这是可行的，但还有一个问题。当我应用您的解决方案时，仅在第二次单击setplan后才会对其进行检查。“你知道原因吗？”安德鲁我更新了它。请检查上述变更计划方法。这会管用的谢谢你，这管用——但还有一个问题。当我应用您的解决方案时，仅在第二次单击setplan后才会对其进行检查。“你知道原因吗？”安德鲁我更新了它。请检查上述变更计划方法。会有用的

changePlan(event) {
 if (!event) {
  this.opt01 = false;
  this.opt02 = false;
  this.opt03 = false;
 } else {
  this.opt01 = this.opt02 = this.opt03 = true;
 }
}