Angular中如何根据数据库存储的值自动勾选对应复选框？

你之前的写法不生效有两个核心原因：

• 你用了selectedEventIds[i] === event.id的匹配逻辑，这里的i是EventTypes数组的遍历索引，和selectedEventIds数组的元素顺序完全不对应，根本无法正确匹配到选中的ID
• 用[attr.checked]绑定的是HTML原生属性，只能控制复选框的初始状态，后续状态同步会有问题，Angular中操作表单元素状态应该直接绑定DOM属性[checked]

方案1：直接绑定checked属性（最简单适配现有代码） #

直接修改复选框的input标签，添加[checked]绑定，用includes方法判断当前event.id是否在选中列表里：

<input type="checkbox" 
  [name] = "'EventType_'+event.id" 
  [value]="event.id" 
  (change)="onCheckboxChange($event)"
  [checked]="selectedEventIds.includes(event.id)"
/>

这个方案不需要修改组件TS代码，直接适配你现有的逻辑即可生效。如果出现匹配不上的情况，先检查event.id和selectedEventIds里存储的ID类型是否一致，比如一个是数字一个是字符串的话includes会返回false，需要先做类型转换再判断，示例：selectedEventIds.includes(+event.id)。

方案2：用响应式表单FormArray（更规范的Angular表单实践） #

你现有代码里已经用到了form.controls['checkArray']，说明已经接入了响应式表单，用FormArray的方案可以更统一的管理表单状态：

组件TS代码修改 #

// 初始化表单时声明checkArray为FormArray
this.form = this.fb.group({
  checkArray: this.fb.array([], [Validators.required])
})

// 拿到选中的ID后，把对应ID塞到FormArray里
if (results['status'] === true) {
  const checkArray = this.form.get('checkArray') as FormArray;
  for (let event_type of results.data.event_type) {
    checkArray.push(this.fb.control(event_type.event_type_id));
    this.selectedEventIds.push(event_type.event_type_id);
  }
}

// 复选框change事件调整
onCheckboxChange(e: any) {
  const checkArray = this.form.get('checkArray') as FormArray;
  if (e.target.checked) {
    checkArray.push(this.fb.control(e.target.value));
  } else {
    const index = checkArray.controls.findIndex(x => x.value === e.target.value);
    checkArray.removeAt(index);
  }
}

模板代码修改 #

给外层的遍历节点加上formArrayName绑定，input添加formControlName绑定即可：

<div class="pretty p-default"  *ngFor="let event of EventTypes index as i" formArrayName="checkArray">
  <input type="checkbox" 
    [name] = "'EventType_'+event.id" 
    [value]="event.id" 
    (change)="onCheckboxChange($event)"
    [formControlName]="i"
  />
  <div class="state d-flex"  >
    <label> {{ event.name | titlecase }} </label>
  </div>
</div>

这个方案的表单状态完全由Angular响应式表单管理，后续校验、取值都更方便。

内容的提问来源于stack exchange，提问作者ganesh