Блог

Я хочу отображать элемент 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 только под отмеченными флажками.

Кто-нибудь может, пожалуйста, дать мне знать, как это исправить?

Спасибо

Вы можете использовать [(ngModel)] для привязки данных из шаблона к файлу typescript, и как только переменная привязки имеет значение true, покажите данные.

 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;
 

Теперь ваши переменные isDayChecked и showTime являются глобальными переменными для компонента, поэтому, когда вы устанавливаете флажок и вызываете функцию onDayChecked, вы меняете значение на переменные isDayChecked и showTime только один раз (не для каждого дня в массиве). Моя рекомендация — преобразовать массив days в массив объектов.

Предлагаемая структура массива:

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

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

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