Angular2中*ngIf与*ngFor联用生成大量空元素的问题求助

嘿，这个情况绝对不是正常结果！虽然功能上能显示符合条件的条目，但DOM里留着70个div完全是冗余的——这些多余的节点不仅会占用浏览器资源，数据量更大时还可能影响页面性能，而且也不符合前端优化的思路。

为什么会出现70个div？ #

你提到之前知道同一元素上不能同时用*ngIf和*ngFor，所以调整后应该是把*ngFor放在了外层div上，*ngIf放在了div内部的元素里？这种情况下，Angular会先执行*ngFor循环生成所有70个div，再通过*ngIf隐藏不符合条件的内容，但div本身还是会留在DOM里，所以你才会看到70个节点。

两种解决办法，帮你只生成符合条件的div： #

1. 组件内提前过滤数据（最推荐）

与其在模板里做条件判断，不如在TypeScript代码里先把符合条件的厂商筛选出来，模板只循环过滤后的数组。这样从根源上减少了需要渲染的元素数量。

举个例子：

// 组件TS文件中
// 假设你已经获取到所有厂商数组producers，以及当前笔记本的producerId
filteredProducers = this.producers.filter(producer => producer.id === this.currentLaptop.producerId);

然后模板里直接循环过滤后的数组：

<div *ngFor="let producer of filteredProducers">
  {{ producer.name }}
</div>

这样DOM里只会出现符合条件的div，数量就是筛选后的结果（这里应该是1个）。

2. 用<ng-container>在模板中处理

如果一定要在模板层面完成筛选，可以用Angular的<ng-container>标签——它是一个不会生成实际DOM节点的容器，把*ngFor放在它上面，*ngIf放在内部的div上，这样不符合条件的div根本不会被生成。

示例代码：

<ng-container *ngFor="let producer of producers">
  <div *ngIf="producer.id === currentLaptop.producerId">
    {{ producer.name }}
  </div>
</ng-container>

这种方式也能保证DOM里只有符合条件的div节点，不会有冗余。

内容的提问来源于stack exchange，提问作者user7776077