如果所有子组件都隐藏了ngIf，如何隐藏组件答案

【问题标题】：how to hide a component if all sub-components are hidden ngIf如果所有子组件都隐藏了ngIf，如何隐藏组件
【发布时间】：2018-11-21 10:10:02
【问题描述】：

例如考虑代码：

<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 文件中收集所有子条件。

【问题讨论】：

offsprings.every(c => !c.condition)

标签： javascript angular typescript angular-ng-if

【解决方案1】：

尝试在 Parent *ngIf 条件中添加

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

【讨论】：

编辑了在条件图中搜索条件的答案

【解决方案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>

Function For Parent 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

【讨论】：