Angular中如何根据复选框选中值控制对应div显隐

原有代码的逻辑缺陷出在循环判断的分支设计上：遍历已选中的复选框值时，每处理一个值就会通过else分支把其余未匹配到的分组div状态强制设为false，后一次循环的判断结果会覆盖前一次的正确状态，最终导致多选项同时勾选、勾选顺序变化时，div显示逻辑完全混乱。

1. 组件TS逻辑修正 #

首先在处理复选框值的方法中，先将所有bus对应的显示状态初始化为隐藏，再遍历选中值做匹配，删除循环内的else分支，仅在匹配到对应值时把对应div的显示状态设为true即可，参考代码如下：

// 每次状态变更先重置所有div为隐藏
this.bus1 = false;
this.bus2 = false;
this.bus3 = false;
this.bus4 = false;
this.bus5 = false;
this.bus6 = false;

// 遍历当前所有选中的复选框值
for (const selectedValue of formValue.checkboxes) {
  if (selectedValue === 'bus-12') {
    this.bus1 = true;
    this.bus2 = true;
  }
  if (selectedValue === 'bus-34') {
    this.bus3 = true;
    this.bus4 = true;
  }
  if (selectedValue === 'bus-56') {
    this.bus5 = true;
    this.bus6 = true;
  }
}

2. 模板绑定写法 #

对应div直接通过*ngIf绑定组件中的状态变量即可，复选框按正常响应式表单写法绑定：

<!-- 复选框组 -->
<label>
  <input type="checkbox" value="bus-12" formControlName="checkboxes">
  选择线路1、2
</label>
<label>
  <input type="checkbox" value="bus-34" formControlName="checkboxes">
  选择线路3、4
</label>
<label>
  <input type="checkbox" value="bus-56" formControlName="checkboxes">
  选择线路5、6
</label>

<!-- 受控显示的div -->
<div *ngIf="bus1">bus1对应内容区域</div>
<div *ngIf="bus2">bus2对应内容区域</div>
<div *ngIf="bus3">bus3对应内容区域</div>
<div *ngIf="bus4">bus4对应内容区域</div>
<div *ngIf="bus5">bus5对应内容区域</div>
<div *ngIf="bus6">bus6对应内容区域</div>

• 初始重置步骤可以避免上一次勾选的状态残留，比如取消某个选项后，对应div不会因为之前的状态残留错误显示
• 移除else分支后，遍历过程不会因为当前处理的是某一个选中值，就把其他已选中分组的状态错误重置为false
• 勾选对应复选框时，值会存在于formValue.checkboxes数组中，匹配后对应div显示；取消勾选时值从数组中移除，对应div会保持初始的false状态，自动隐藏，完全匹配需求。

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