根据 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
}