Angular 8 ngIf 在 false 时创建空元素答案

【问题标题】：Angular 8 ngIf creates empty element when falseAngular 8 ngIf 在 false 时创建空元素
【发布时间】：2020-01-09 03:57:29
【问题描述】：

我对 Anguar8 和 ngIf 有疑问：

我有一个创建 div 的代码，它将一些图像及其详细信息从带有条件的 json 加载到页面：

HTML 代码：

        <div class="row" >
          <div class="col-md-2 col-6 col-sm-4" style="margin-bottom: 1em;" *ngFor="let item of product; let i=index"> <br>
            <div class="box" *ngIf="i>35">
              <img [src]="item.photo" alt="image slide" style="display: block; width: 100%;">
              <div class="text-center">
                <h6>{{item.name}}</h6>
                <h6>MRP : ₹ {{item.price}}</h6>                
              </div>
            </div>
          </div>
        </div>

问题是，Angular 创建了一个空的 div，其中包含以下注释：

<div _ngcontent-oio-c3="" class="col-md-2 col-6 col-sm-4" style="margin-bottom: 1em;"><br _ngcontent-oio-c3=""><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div>

【问题讨论】：

这符合预期。没有创建具有 ngif 的 div，但它的父级存在于 HTML 中。
div 将显示为外部 div，这是预期的行为。
检查此网址angular.io/api/common/SlicePipe。您可以使用切片管。如果您遇到任何问题，请告诉我。

标签： html angular angular-ng-if

【解决方案1】：

你可以写*ngFor="let item of product | slice:0:35;"。参考https://angular.io/api/common/SlicePipe

【讨论】：

【解决方案2】：

有两种选择： 1.您可以使用管道过滤列表以避免 2.你可以试试这个不应该创建任何模板

<div *ngIf="i>35; else noData">
	{{data}}
</div>
<ng-template #noData>
</ng-template>

【讨论】：