Angular11 基于选中状态动态控制复选框勾选状态实现问题

第一步：修复现有基础代码问题 #

你原有代码存在两处基础错误，先修正保证基础功能正常：

1. HTML 模板中id属性未闭合、name误用了不存在的member变量，且[checked]写死了判断逻辑，需要改为动态绑定选中数组
2. TS 代码中初始化时错误将全量角色赋值给选中数组，onRoleChange里的index变量未定义

修正后的HTML模板代码：

<div *ngFor="let role of roles">
  <input 
    type="checkbox" 
    name="{{ role.roleId }}" 
    id="{{ role.roleName }}"
    [disabled]="role.roleName == 'User'" 
    <!-- 动态绑定选中状态：当前角色ID在选中数组中则勾选 -->
    [checked]="user.roles.includes(role.roleId)"
    (change)="onRoleChange(role.roleId, role.roleName, $event)"
  > 
  {{ role.roleName }}
</div>

第二步：实现联动控制逻辑 #

核心逻辑是在选中互斥角色时，直接过滤掉冲突的角色ID，由于绑定了[checked]，数组更新后复选框状态会自动同步，无需手动操作DOM。

修正后的TS业务代码：

roles: Role[];
isUserRole: boolean = false;
// 定义互斥角色常量，方便后续维护
const EXCLUSIVE_ROLES = {
  PROCESS_LEVEL: 'ProcessLevel',
  ADMIN: 'Admin',
  SUPER_ADMIN: 'SuperAdmin'
} as const;

user: Member = {
  userId: '',
  userName: '',
  emailAddress: '',
  roles: [],
  userAgencies: [],
  processLevels: []
};

this.roleService.getAllroles().subscribe(response => {
  this.roles = response;
  // 初始化选中数组：默认仅选中禁用的User角色，修正原有赋值错误
  const defaultRole = this.roles.find(r => r.roleName === "User");
  if (defaultRole) {
    this.user.roles = [defaultRole.roleId];
    this.isUserRole = true;
  }
});

onRoleChange(roleId: number|string, roleName: string, event: Event) {
  const isChecked = (event.target as HTMLInputElement).checked;
  const { PROCESS_LEVEL, ADMIN, SUPER_ADMIN } = EXCLUSIVE_ROLES;

  if (isChecked) {
    if (roleName === PROCESS_LEVEL) {
      // 选中ProcessLevel时，移除已选的Admin、SuperAdmin
      const adminId = this.roles.find(r => r.roleName === ADMIN)?.roleId;
      const superAdminId = this.roles.find(r => r.roleName === SUPER_ADMIN)?.roleId;
      this.user.roles = this.user.roles.filter(id => id !== adminId && id !== superAdminId);
      this.user.roles.push(roleId);
    } else if (roleName === ADMIN || roleName === SUPER_ADMIN) {
      // 额外兼容：选中Admin/SuperAdmin时自动移除ProcessLevel，保证互斥逻辑一致
      const processLevelId = this.roles.find(r => r.roleName === PROCESS_LEVEL)?.roleId;
      this.user.roles = this.user.roles.filter(id => id !== processLevelId);
      this.user.roles.push(roleId);
    } else {
      // 普通角色直接加入选中数组
      this.user.roles.push(roleId);
    }
  } else {
    // 取消选中时直接过滤掉当前角色ID，避免索引计算错误
    this.user.roles = this.user.roles.filter(id => id !== roleId);
  }
}

注意事项 #

• 数组操作统一用filter代替splice，避免索引计算错误导致的选中状态异常
• 所有状态更新直接操作user.roles数组即可，Angular会自动同步界面复选框的勾选状态
• 如果后续需要新增其他互斥规则，直接修改EXCLUSIVE_ROLES和对应判断逻辑即可

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