Javascript ngIf和[hidden]在angular 5和fxFlex框架中无法正常工作

注意：下面是

ngIf

的一个示例，其中应该隐藏的元素现在是行的不可见成员，因此它们仍然占用空间

{{question.label}

*ngIf

是一个结构指令，这意味着如果表达式的计算结果为false，它将不会在DOM中呈现元素

在你的演示中，如果我

<div fxLayout="row wrap" fxLayoutAlign="space-around center">
      <div *ngFor="let question of questions; let i = index">
        <mat-slide-toggle *ngIf="i==3" [id]="question.key" >  {{question.label}} </mat-slide-toggle>
      </div>  
    </div>

{{question.label}

然后只有一个切换按钮来了。检查元件时，您将看到有两个

<div _ngcontent-c30="">
        <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
      </div>

---

但是除了第三个按钮外，这些都是没有滑动切换按钮的空白div容器。

使用fxFlex时，可以使用fxHide控制元素的可见性：

<mat-slide-toggle [fxHide]="i == 3" ...

---

是的，它们是空的，但这就是问题所在，因为它仍然在DOM中。我正在寻找的预期行为是，当ngIf应用时，它会将显示的元素带到第一个位置，因为其他元素应该不在那里。我想要的这种行为可以用[hidden]解决，但正如我前面提到的，flex显示样式覆盖了display none css，因此它显示所有元素，甚至hidden=true。@Steve好吧，div不是因为*ngIf计算为false，而是因为*ngFor。因此，在执行*ngFor之前，可能需要根据ngIf条件过滤阵列。