ngIf 和 [hidden] 无法在 Angular 5 和 fxFlex Framework 中按预期工作

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>

你好

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

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

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

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

fxFlex 布局

链接到沙盒进行测试 堆栈闪电战沙盒

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 容器，除了第三个之外没有滑动切换按钮。