Angular 4模板中声明使用变量：能否简化代码并避免额外div？

你遇到的这个额外div的困扰，Angular其实早就给出了针对性的解决方案——<ng-container>是一个虚拟容器节点，它只会作为结构型指令的宿主存在，最终不会被渲染成真实的HTML元素，完全适配你“要判断显示逻辑但不想多生成DOM节点”的需求。

举个具体的例子，假设你现在的精简代码是这样的（带有多余div）：

<div *ngIf="getData() as data">
  <div *ngFor="let item of data">
    {{ item.content }}
  </div>
</div>

只需要把外层的<div>替换成<ng-container>就行：

<ng-container *ngIf="getData() as data">
  <div *ngFor="let item of data">
    {{ item.content }}
  </div>
</ng-container>

这么做的优势很明显：

• 彻底消除了多余的div，DOM结构更简洁干净
• 通过as data将getData()的结果赋值给变量，整个区块内只调用一次函数，既保证了功能一致，还提升了性能（刚好契合你精简代码、避免重复调用的初衷）
• 完全保留了“数据为空时不显示整个区块”的核心逻辑

需要注意的是，<ng-container>仅用于承载结构型指令（比如*ngIf、*ngFor、*ngSwitchCase），不能直接绑定属性或添加样式，但这完全匹配你的使用场景。

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