Angular中如何通过父复选框选中状态用*ngIf控制子选项显隐

解决方案 #

你可以直接使用Angular的模板引用变量实现需求，无需额外在组件类中定义变量存储每个父选项的选中状态，改动量极小：

修改后的模板代码 #

<ul *ngFor="let job of jobs; let i = index">
  <!-- 给当前父复选框定义模板引用变量 #parentCheckbox -->
  <input type="checkbox" id="{{i}}" value="{{job.name}}" #parentCheckbox>
  <label for="{{i}}">{{job.name}}</label>
  <!-- 直接读取模板变量的checked属性作为判断条件 -->
  <ul *ngIf="parentCheckbox.checked">
    <li *ngFor="let child of job.children"><label><input type="checkbox"> 
     {{child.name}}</label></li>
    <li *ngFor="let child of job.children"><label><input type="checkbox"> 
     {{child.name}}</label></li>
  </ul>
</ul>

方案说明 #

• 模板引用变量的作用域仅限当前*ngFor循环的单个条目内，多个父选项的变量互相独立，不会冲突，完全适配你多同级父选项的场景
• 不需要修改组件ts代码，也不需要对API返回的原始数据做额外处理，是最轻量的实现方案

如果你后续需要在组件逻辑中获取所有选中的父选项，也可以选择给jobs数组的每一项扩展一个选中状态字段，方案如下：

1. 组件ts代码中处理接口返回数据

// 拉取到jobs数据后，给每一项追加isChecked选中状态字段
this.jobs = apiResponse.map(job => ({ ...job, isChecked: false }))

2. 模板绑定选中状态

<ul *ngFor="let job of jobs; let i = index">
  <input type="checkbox" id="{{i}}" value="{{job.name}}" [(ngModel)]="job.isChecked">
  <label for="{{i}}">{{job.name}}</label>
  <ul *ngIf="job.isChecked">
    <li *ngFor="let child of job.children"><label><input type="checkbox"> 
     {{child.name}}</label></li>
    <li *ngFor="let child of job.children"><label><input type="checkbox"> 
     {{child.name}}</label></li>
  </ul>
</ul>

注意：使用[(ngModel)]双向绑定需要先在对应模块中导入FormsModule。

内容的提问来源于stack exchange，提问作者Słowik