我有点纠结于我的问题。我正在处理这样的视图:

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

但我无法确定我可以使用什么条件。有简单的解决方案吗？

@编辑让我澄清一下。我可能有以下多个选项:

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

---

顺晟科技：

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

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

请注意，您还必须使用

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

父复选框。否则，复选框的checked/unchecked属性将不会更改。

按以下方式修改模板:

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

Stackblitz:https://stackblitz.com/edit/angull-x3coln？file=src/app/app.component.html

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

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

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

EX（假设您的模型名为Job)

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

则ngIf将为

可以这样做

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

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

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

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>

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

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

方法2：如果您不想修改作业/选项列表，请使用Incase

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