как показать и скрыть div на основе выбора флажка в Angular 8

Question

У меня есть флажок, построенный из массива.

<div class="form-check" *ngFor="let plan of plans; index as i" [formGroupName]="i">
        <label class="form-check-label fw7 h5 mb0">
          <input class="form-check-input" type="checkbox" formControlName="checkbox">
          {{plan.planShortName}}
        </label>
<div>

Мне нужно показать и скрыть div в конце страницы, если plan.mailingResponsibility имеет значение true для любого из выбранных планов. по умолчанию один из планов всегда выбирается при загрузке страницы. Любое руководство по этому вопросу о том, каким должен быть мой подход? ниже приведен div, который мне нужно показать и скрыть

  <div *ngIf="showFootNote">
        <p>
          * By providing an e-mail address you agree to the terms..
        </p>
      </div>

Вот пример, над которым я работаю Пример: https://stackblitz.com/edit/angular-pnw2wg?file=src%2Fapp%2Fapp.component.html

Answer 1

Прежде всего showFootNote должно быть по умолчанию false.

showFootNote: boolean = false;

Вам необходимо привязать вход флажка к некоторому полю. Я добавил поле isChecked в интерфейсе Plan.

<label>
    <input 
        type="checkbox" 
        [(ngModel)]="plan.isChecked" 
        formControlName="checkbox" 
        (change)="updateState()">
    {{plan.planShortName}}
</label>

Используйте событие change для вызова функции для обновления состояния showFootNote.

updateState(){
    // Reset 
    this.showFootNote = false;
    // Itearte over plans 
    this.plans.forEach(
        plan => {
            // If selected and flag is true
            if(plan.isChecked && plan.mailingResponsibility){
                this.showFootNote = true;
            }
        }
    )
}

Демо: https://stackblitz.com/edit/angular-bzcsaw