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

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

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

export class Job {

isChecked: boolean = false; 

}

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

Answer 2

<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 3

NgIf

A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean.

您可以只检查工作是否存在。

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

Answer 4

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

使用此变量检查复选框 (checked/unchecked) 的状态，并基于此 show/hide 子项。

请注意，您还必须使用

(change)="true"

用于父复选框。如果没有这个，复选框的 checked/unchecked 属性将不会改变。

像这样修改您的模板：

<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 5

实现此目的的理想方法是保留一个 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 }];

方法二：如果不想修改列表jobs/options

<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 = {};

Answer 6

你可以这样做

假设您的列表如下所示 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 代码应该类似于下面 hide/unhide 基于 parent 状态的 children。

<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>

Angular ngIf 使用父复选框检查条件

Angular ngIf using parent checkbox checked condition

html

angular-ng-if

angular