Angular ngIf 使用父复选框选中条件

Question

我有点被我的问题困住了。我正在处理这样的视图：

我正在从 API 获取数据，因此我将有多个选项和子选项。但是，我希望仅在选中父复选框时才出现子选项。我尝试使用 *ngIf:

 <ul *ngFor="let job of jobs; let i = index">
  <input type="checkbox" id="{{i}}" value="{{job.name}}"><label
   for="{{i}}">{{job.name}}</label>
  <ul *ngIf="CONDITION HERE">
   <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>

但我无法确定我可以使用什么条件。有没有简单的解决方案来解决这个问题？

@edit 让我澄清一下。我可能有多个这样的选择：

使用标志是行不通的，因为每个父选项都必须使用唯一的布尔变量。

Answer 1

您可以在模板引用变量的帮助下实现这一点。为所有重复的父输入复选框元素分配一个模板变量。

使用此变量检查复选框的状态（选中/未选中）并基于此显示/隐藏子项。

请注意，您还必须使用

(change)="true"

用于父复选框。没有这个复选框的选中/未选中属性将不会改变。

像这样修改你的模板：

<ul *ngFor="let job of jobs; let i = index">
  <input type="checkbox" id="{{ i }}" value="{{ job.name }}" (change)="true" #checkBox/><label
    for="{{ i }}"
    >{{ job.name }}</label
  >
  <ul *ngIf="checkBox.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>

Stackblitz：https://stackblitz.com/edit/angular-x3coln?file=src/app/app.component.html

Answer 2

在你的模型中添加一个选中的属性，然后根据它是否被选中，显示子复选框。

Ex（假设您的模型名为 Job）

export class Job {

isChecked: boolean = false; 

}

那么您的 ngIf 将是 *ngIf="job.isChecked"

Answer 3

<input [checked]="checkedMain" type="checkbox" id="{{i}}" value="{{job.name}}"><label
   for="{{i}}">{{job.name}}</label>

<ul *ngIf="checkedMain">
   <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>

Answer 4

NgIf

有条件地包含一个基于模板的结构指令 强制转换为布尔值的表达式的值。

你可以检查作业是否存在。

<ul *ngIf="job"> //should do the job for you as it will be coerced to true if job exists.

Answer 5

你可以这样做

假设您的列表如下所示，来自 API

    this.list = [
  {
    id: 1,
    title: 'parent1',
    checked: false,
    children:["A","B","C"]
  },
  {
    id: 2,
    title: 'parent2',
    checked: false,
    children:["A","B","C"]
  },
  {
    id: 3,
    title: 'parent3',
    checked: false,
    children:["A","B","C"]
  }      
]

您的 html 代码应如下所示，以根据父状态隐藏/取消隐藏子项。

<ul *ngFor="let item of list">
<input type="checkbox" [(ngModel)]="item.checked"/>{{item.title}}
 <ng-template [ngIf]="item.checked">
    <li *ngFor="let item1 of item.children">
    <input type="checkbox" >{{item1}}
  </li>
</ng-template>
</ul>

Answer 6

实现这一点的理想方法是保留一个 isChecked 属性来跟踪每个选项的复选框状态。

<div>
<ul *ngFor="let option of options; let i = index">
<input type="checkbox" id="{{ i }}" [(ngModel)]="option.isChecked" /><label
  for="{{ i }}"
  >{{ option.name }}</label
>
<ul *ngIf="option.isChecked">
  <li *ngFor="let subOption of option.subOptions">
    <label>{{ subOption }}</label>
  </li>
  </ul>
 </ul>
</div>

options = [{ name: 'Type1', subOptions: [1, 2, 3], isChecked: false }];

方法2：如果您不想修改作业/选项列表

<div>
 <ul *ngFor="let option of options; let i = index">
<input type="checkbox" id="{{ i }}" [(ngModel)]="state[option.name]" /> 
<label
  for="{{ i }}"
  >{{ option.name }}</label
>
<ul *ngIf="state[option.name]">
  <li *ngFor="let subOption of option.subOptions">
    <label>{{ subOption }}</label>
  </li>
  </ul>
 </ul>  
</div>

options = [{ name: 'Type1', subOptions: [1, 2, 3]}];
state = {};