Angular中如何根据已有数据自动勾选复选框

我希望利用该列表的数据实现复选框自动勾选功能，相关代码如下：

HTML代码 #

<div>
    <form [formGroup]="myForm">
        <ul class="chat-user-list">
            <li *ngFor="let empl of emp">
                <a>
                    <div class="media">
                        <span class="avatar"><img alt="" src="assets/img/profiles/avatar-09.jpg"></span>
                        <div class="media-body align-self-center text-nowrap">
                            <div class="user-name">{{empl.employeeName}}</div>
                        </div>
                        <div class="input-group-append">
                            <input type="checkbox"  
                                (change)="addEmployee(empl.employeeGuid, $event.target.checked)"
                                (change)="viewAddedEmployees(empl.employeeName, $event.target.checked)">
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <button class="btn btn-primary submit-btn" (click)="submitSelectedEmployee()" type="submit">Submit</button>
    </form>
    <!-- <pre>Form values: {{myForm.value | json}}</pre> -->
</div>

TS代码 #

this.assignedEmpList = this.indivijualTask.taskAssignedEmployeeList;

上述assignedEmpList变量存储了需要勾选的对应数据，其控制台输出结果如上方截图所示。

要实现默认自动勾选指定员工的功能，只需两步修改即可兼容现有逻辑：

1. 在TS逻辑中提前缓存已分配员工的唯一标识，避免每次遍历数组判断，提升运行性能：

// 声明Set存储已分配员工的employeeGuid，判断效率比数组遍历更高
private assignedEmpGuidSet = new Set<string>();

// 原赋值逻辑后新增遍历填充Set的代码
this.assignedEmpList = this.indivijualTask.taskAssignedEmployeeList;
this.assignedEmpList.forEach(emp => {
  this.assignedEmpGuidSet.add(emp.employeeGuid);
});

// 新增判断员工是否属于已分配列表的公共方法
isEmpAssigned(empGuid: string): boolean {
  return this.assignedEmpGuidSet.has(empGuid);
}

2. 修改HTML中的复选框节点，新增[checked]属性绑定判断逻辑，同时可将重复的两个change事件合并简化：

<input type="checkbox"  
    [checked]="isEmpAssigned(empl.employeeGuid)"
    (change)="addEmployee(empl.employeeGuid, $event.target.checked); viewAddedEmployees(empl.employeeName, $event.target.checked)">

如果后续需要将勾选状态和myForm表单组强关联，也可以改用FormArray绑定复选框列表，当前方案不需要调整原有提交、选中触发的业务逻辑，可直接复用现有代码。

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