在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文件，一旦绑定变量为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;

Answer 2

现在您的变量isDayChecked和showTime是组件的全局变量，所以当你选中一个复选框并调用onDayChecked函数时，仅一次将值更改为变量isDayChecked和showTime(不是数组中的每一天)。我的建议是将数组days转换为对象数组。

建议结构数组:

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