Angular中如何根据数组内ID预设选中复选框

先修正你代码里的两处小问题：

• 模板里的{{ userList.Name }}要改成{{ user.Name }}，因为*ngFor循环的是单个user对象
• selectUser方法里的Name:Name需替换为Name: user.Name，否则会引用未定义变量

接下来实现重新加载时自动选中已在tempLists中的用户，只需给复选框绑定[checked]属性，判断当前用户ID是否存在于选中列表即可：

修改后的模板代码 #

<div *ngFor="let user of userList">
  {{ user.Name }}
  <input type="checkbox" 
         (change)="selectUser($event, user)"
         [checked]="tempLists.some(item => item.userID === user.UserID)">
</div>

优化后的组件方法 #

selectUser(event: Event, user: any) {
  const checkbox = event.target as HTMLInputElement;
  if (checkbox.checked) {
    const userDetails = {
      userID: user.UserID,
      Name: user.Name,
    };
    this.tempLists.push(userDetails);
  } else {
    this.tempLists = this.tempLists.filter(obj => obj.userID !== user.UserID);
  }
}

如果觉得模板里的表达式过长，也可以封装成组件方法让模板更简洁：

添加组件方法 #

isUserSelected(user: any): boolean {
  return this.tempLists.some(item => item.userID === user.UserID);
}

修改模板调用方法 #

<input type="checkbox" 
       (change)="selectUser($event, user)"
       [checked]="isUserSelected(user)">

原理说明 #

[checked]是Angular的单向属性绑定，每当视图更新（比如重新加载userList、tempLists数组变化）时，会自动执行判断逻辑，将已在选中列表中的用户对应的复选框设为选中状态。

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