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是否允许从DOM中移除元素，如ng-if on angular 1.x，而不必制作自定义指令来处理它比框架更好以及如何使用{{ 1}}如果元素的flex属性否定[hidden]的效果？

fxFlex Layouts

链接到沙箱进行测试 Stackblitz sandbox

Answer 1

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

Answer 2

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

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

ngIf和[hidden]无法按预期使用angular 5和fxFlex Framework

2 个答案: