Ошибка при применении нескольких условий к флажку в приложении Angular 8

Question

У меня есть четыре (3 для вариантов и 1 для установленного плана) в моей форме со следующими требованиями:

1. Если отмечены все три варианта, установленный план проверяется автоматически, и параметры исчезают
2. Если установленный план проверяется, другие параметры также проверяются автоматически, а затем исчезают
3. Если установленный план снимается, другие параметры появляются снова и тоже не проверяются

С моим кодом ниже, 1 и 2> 3 работают нормально, но 1> 3 не работает (опции не возвращаются, когда флажок установленного плана снят). Чего не хватает в моем коде? Возможно, здесь нет ничего сложного, но я буду признателен за любые советы.

Вот упрощенный Stackblitz , описывающий проблему и скопированный исходный код.

(Реальный код имеет некоторые анимации , поэтому важно сделать все опции, проверенные для требования 2, перед исчезновением)

HTML

<div [ngClass]="setClass()">
<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>

TS

public opt01: boolean;
public opt02: boolean;
public opt03: boolean;

public setplan: boolean;

setClass() {
  if (
    (this.opt01 == true &&
      this.opt02 == true &&
      this.opt03 == true) ||
    this.setplan == true
  ) {
    return 'container-wrap -hidden';
  } else if (this.setplan == false) {
    return 'container-wrap';
  }
} 

CSS (не важно)

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

Answer 1

Я не знаю, почему ты так много работаешь. Вероятно, лучший способ сделать это - использовать директиву * 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 () в все. и никаких дополнительных занятий. так чище код. Вы также можете анимировать angular шаблоны компонентов, которые используют директиву * ngIf. для этого также пример блога здесь

Answer 2

Вы можете добавить ngModelchange для вашего элемента ввода setplan для обработки события изменения.

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

, а затем вы создадите метод в своем файле ts с именем changePlan (событие)

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