在 Angular 中選中或取消選中時，如何在每個復選框下顯示或隱藏 div 標簽？

Question

我想在選中每個復選框時在每個復選框下顯示一個 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 標簽。

誰能讓我知道如何解決這個問題？

謝謝

Answer 1

您可以使用[(ngModel)]將模板中的數據綁定到 typescript 文件，一旦綁定變量為真，就顯示數據。

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;

Answer 2

現在您的變量isDayChecked和showTime是組件的全局變量，因此當您選中一個復選框並調用onDayChecked function 時，您只需將變量 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;
}