如何根据Angular 8中的复选框选择显示和隐藏div答案

【问题标题】：how to show and hide div based on the checkbox selection in Angular 8如何根据Angular 8中的复选框选择显示和隐藏div
【发布时间】：2020-03-17 21:42:36
【问题描述】：

我有一个从数组构建的复选框。

<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>

如果 plan.mailingResponsibility 对于任何一个所选计划为真，我需要在页面末尾显示和隐藏一个 div。默认情况下，页面加载时始终选择其中一个计划。关于我的方法应该如何的任何指导？下面是我需要显示和隐藏的 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

【问题讨论】：

所以你需要通过查看每个复选框的变化来切换showFootNote 状态，对吧？
您尚未将复选框输入绑定到任何变量。这是为什么呢？
是的复选框更改。如果选择了两个复选框并且其中一个具有属性 mailResponsibility True 我需要显示脚注。同样默认情况下，页面加载时已经选中了一个复选框，因此我也必须检查该复选框。我没有绑定复选框输入，因为没有必要获取它的值。我可以添加应该不是问题
检查以下解决方案。

标签： angular angular8

【解决方案1】：

首先showFootNote应该默认为false。

showFootNote: boolean = false;

您需要将复选框输入绑定到某个字段。我在Plan 接口中添加了一个字段isChecked。

<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

【讨论】：

这有帮助谢谢。但是默认情况下，页面加载时已经选中了一个复选框，那么如何检查该属性是否为真？
会检查哪一项？第一个？在初始化计划时设置它的值。
这是否符合您的要求：https://stackblitz.com/edit/angular-bzcsaw
一切看起来都不错，除非最初选中的复选框具有mailingResponsibility true，因为尚未触发事件处理程序，因此不会显示脚注。要解决它，可以在ngOnInit() 中触发一次。见这里：stackblitz.com/edit/angular-853wzd