根据 angular 中的数据库值选中复选框
make checkboxes checked depending on database values in angular
我根据数据库获取的值显示多个复选框。我需要从存储的值中检查它们。
模板代码
<div class="col-lg-12">
<div class="form-group">
<label class="w-100">Type of events <b style="color: red">*</b></label>
<div class="pretty_wrapper">
<div class="pretty p-default" *ngFor="let event of EventTypes index as i">
<input type="checkbox"
[name] = "'EventType_'+event.id"
[value]="event.id"
(change)="onCheckboxChange($event)"
/>
<div class="state d-flex" >
<label> {{ event.name | titlecase }} </label>
</div>
</div>
</div>
<div class="text-danger" *ngIf="submitted && this.form.controls['checkArray'].errors?.required" >
Event type is required, select atleast one value.
</div>
</div>
</div>
组件代码
EventTypes: any = [];
selectedEventIds:any = [];
...
this.userService.getEventType().subscribe((data) => {
console.log(data);
this.EventTypes = data.data;
});
....
if (results['status'] === true) {
for (let event_type of results.data.event_type) {
this.selectedEventIds.push(event_type.event_type_id);
}
...
首先,我通过迭代 EventTypes
在复选框中显示数据库默认元素。并存储用户选择的值。我正在 selectedEventIds
中获取那些选定的值。现在我需要检查 id 和获取的值是否匹配的复选框。
我尝试添加 [attr.checked]="selectedEventIds[i] === event.id ? true : null"
但它不起作用。
不知何故,我需要用当前 event.id
检查 selectedEventIds
的每个值。我如何在 angular 中做到这一点?有没有其他方法可以根据数据库值选中复选框?
请指导和帮助。提前致谢。
您需要添加一个函数,该函数将检查此事件 ID 是否存在于 selectedEventIds 数组中
请尝试以下代码。
[attr.checked]="isChecked(event.id)"
isChecked(eventId){
return this.selectedEventIds.indexOf(eventId)>-1 ? true : null
}
我根据数据库获取的值显示多个复选框。我需要从存储的值中检查它们。
模板代码
<div class="col-lg-12">
<div class="form-group">
<label class="w-100">Type of events <b style="color: red">*</b></label>
<div class="pretty_wrapper">
<div class="pretty p-default" *ngFor="let event of EventTypes index as i">
<input type="checkbox"
[name] = "'EventType_'+event.id"
[value]="event.id"
(change)="onCheckboxChange($event)"
/>
<div class="state d-flex" >
<label> {{ event.name | titlecase }} </label>
</div>
</div>
</div>
<div class="text-danger" *ngIf="submitted && this.form.controls['checkArray'].errors?.required" >
Event type is required, select atleast one value.
</div>
</div>
</div>
组件代码
EventTypes: any = [];
selectedEventIds:any = [];
...
this.userService.getEventType().subscribe((data) => {
console.log(data);
this.EventTypes = data.data;
});
....
if (results['status'] === true) {
for (let event_type of results.data.event_type) {
this.selectedEventIds.push(event_type.event_type_id);
}
...
首先,我通过迭代 EventTypes
在复选框中显示数据库默认元素。并存储用户选择的值。我正在 selectedEventIds
中获取那些选定的值。现在我需要检查 id 和获取的值是否匹配的复选框。
我尝试添加 [attr.checked]="selectedEventIds[i] === event.id ? true : null"
但它不起作用。
不知何故,我需要用当前 event.id
检查 selectedEventIds
的每个值。我如何在 angular 中做到这一点?有没有其他方法可以根据数据库值选中复选框?
请指导和帮助。提前致谢。
您需要添加一个函数,该函数将检查此事件 ID 是否存在于 selectedEventIds 数组中 请尝试以下代码。
[attr.checked]="isChecked(event.id)"
isChecked(eventId){
return this.selectedEventIds.indexOf(eventId)>-1 ? true : null
}