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

Question

注意：下面是ngIf 的示例，其中应该隐藏的元素现在是行的不可见成员，因此它们仍然占用空间。

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

注意：下面是[hidden]，当它为真时什么都不做。

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

嗨，

我正在做一个 Angular 5 项目，我遇到了一些奇怪的功能。

通常在 angularJS 1.x 中，ng-if 会完全从 DOM 中删除元素。但是，在 Angular 5 中，ngIf 将元素保留在 DOM 中。

下一个合乎逻辑的步骤是使用[hidden]，因为它应用了display:none 属性。可是等等！如果您希望隐藏的元素具有显示属性，则该属性将覆盖[hidden]。

我的问题是，Angular 5 是否允许从 DOM 中删除元素，例如 Angular 1.x 上的 ng-if，而无需制作自定义指令来比框架更好地处理它以及如何使用 @987654332 来处理它@如果元素上的 flex 属性否定了 [hidden] 的效果？

fxFlex Layouts

链接到沙盒进行测试 Stackblitz sandbox

Answer 1

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

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

Answer 2

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

然后只有一个切换按钮来了。检查元素，你会看到有几个

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

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