Question

例如考虑代码：

<div *ngIf="-------NOTEMPTY-------">
  Parent
  <div *ngFor = 'let child of offsprings'>
    <div name="c1" *ngIf="conditions[child.name]">
      Child0
    </div>
  </div>
</div>

如果所有子部门的ngIf均为false，我希望父部门的ngIf为false。

注意：我无法在ts文件中收集所有子条件。

Answer 1

尝试添加父* ngIf条件

!offsprings.every(child => !conditions[child.name]);

Answer 2

将函数调用用作父级上的 *ngIf = checkIfExists() 。

<div *ngIf="checkIfExists()">
  Parent with children existing
  <div *ngFor = 'let child of offsprings'>
    <div name="c1" *ngIf="conditions[child.name]">
      Child0 {{conditions[child.name]}}
    </div>
  </div>
</div>

父级ngIf函数：
方法是遍历offsprings数组的每个元素，
并检查conditions[child.name]是否存在。

checkIfExists() {
  let ifDefined: boolean;
    this.offsprings.forEach(e=> {
      if (this.conditions[e.name]) {
        ifDefined = true;
      } 
    });
    return ifDefined;
}

StackBlitz Working Demo

如果所有子组件都被隐藏，如何隐藏组件ngIf

2 个答案: