Angular 8 ngIf 在 false 时创建空元素

Question

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

Answer 1

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

Answer 2

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

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

Angular 8 ngIf 在 false 时创建空元素

Angular 8 ngIf creates empty element when false

html

angular-ng-if

angular