在Angular中选中或取消选中时，如何在每个复选框下显示或隐藏div标签？答案

【问题标题】：How to show or hide a div tag under each checkbox when checked or unchecked in Angular?在Angular中选中或取消选中时，如何在每个复选框下显示或隐藏div标签？
【发布时间】：2021-01-20 12:25:56
【问题描述】：

我想在选中时在每个复选框下显示一个 div 元素，并在未选中复选框时隐藏它。

下面是我的html：

<div class="form-group">
  <label for="days">Please select the days:</label>
    <div class="checkbox-inline" *ngFor="let day of days">
       <label>
         <input
         class="form-check-input"
         type="checkbox"
         [value]="day"
         name="{{day}}"
         id="{{day}}"   
         (change)="onDayChecked($event.target.checked)"
         required>
         {{day}}
        </label>
        <div *ngIf="showTime">
             <!--Display this under each checked box and hide if unchecked-->
        </div>
     </div>
   </label>
<div>

我的 ts 文件：

isDayChecked: boolean;
  showTime: boolean=false;
  onDayChecked(isdaychecked: boolean) {
    this.isDayChecked=isdaychecked;
    this.showTime=false;
    this.days.forEach(
      day=>{
        if(this.isDayChecked){
          this.showTime=true;
        }
      }
    )
  }

当我选中一个框时使用此代码，每天都会显示 div 标签。但我只想在复选框下显示 div 标签。

谁能告诉我如何解决这个问题？

谢谢

【问题讨论】：

标签： javascript html angular typescript web-deployment

【解决方案1】：

您可以使用[(ngModel)] 将模板中的数据绑定到打字稿文件，一旦绑定变量为真，就显示数据。

1. Template

 <div class="row">
    <input type="checkbox" [(ngModel)]="condition">
    <div *ngIf="condition===true">
      <div class="alert alert-success">
        You Can See Me!
      </div>
    </div>
  </div>

2. TS File
  condition : boolean = false;

【讨论】：

【解决方案2】：

现在您的变量 isDayChecked 和 showTime 是组件的全局变量，因此当您选中复选框并调用 onDayChecked 函数时，您会更改变量 isDayChecked 和 showTime 的值只有一次（不是数组中的每一天）。我的建议是将数组天数转换为对象数组。

建议的结构数组：

days = [
   {
     dayName: 'name',
     showTime: false
   },
   {
     dayName: 'other day',
     showTime: true
   }
];

HTML 文件：

   <div class="form-group">
          <label for="days">Please select the days:</label>
            <div class="checkbox-inline" *ngFor="let day of days">
               <label>
                 <input
                 class="form-check-input"
                 type="checkbox"
                 [value]="day.dayName"
                 name="{{day.dayName}}"
                 id="{{day.dayName}}"   
                 (change)="onDayChecked($event.target.checked, day)"
                 required>
                 {{day.dayName}}
                </label>
                <div *ngIf="day.showTime">
                     <!--Display this under each checked box and hide if unchecked-->
                </div>
             </div>
        </div>

.ts 文件：

删除 isDayChecked 和 showTime 变量。

onDayChecked(isDayChecked: boolean, day: any) {
    day.showTime = isDayChecked;
}

【讨论】：