Angular *ngIf 条件渲染：如何避免空容器显示并优化DOM结构

本教程深入探讨angular中`*ngif`指令的正确使用，旨在解决条件渲染时容器元素仍旧显示为空白框的问题。文章将解释`*ngif`的工作原理，指出常见错误，并提供使用`*ngif`与`ng-container`结合的优化方案，确保仅在数据存在时才渲染完整的ui元素，从而避免不必要的dom元素和视觉空白。

在Angular应用开发中，*ngIf是一个强大的结构型指令，用于根据条件动态地添加或移除DOM元素。然而，开发者在使用*ngIf时常会遇到一个常见问题：尽管内部内容被正确隐藏，但外部的容器元素却依然显示，导致页面上出现不必要的空白区域。本文将详细解析这一问题的原因，并提供一个优雅的解决方案。

理解 *ngIf 的工作原理

*ngIf指令的工作机制是直接操作DOM树。当条件为真时，它会将对应的元素及其子元素添加到DOM中；当条件为假时，它会从DOM中完全移除该元素及其子元素。这与CSS的display: none;不同，后者只是隐藏元素，但元素本身仍然存在于DOM中并占据空间。理解这一点是解决本问题的关键。

问题分析：为什么会出现空容器？

考虑以下场景，我们希望遍历一个数据源，并只显示那些Value不为空的项。

原始HTML结构：

<div class="content">
 <div class="data-item" *ngFor="let item of dataSource">
  <!-- 这里的data-item div总是会被渲染 -->
  <div *ngIf="item.Value !== ''">
   <!-- 只有当item.Value不为空时，这个div及其内容才会被渲染 -->
   <div>{{item.Header}}</div>
   <div>{{item.Value}}</div>
  </div>
 </div>
</div>

原始CSS样式：

.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.data-item {
  flex: 0 0 21%; /* 为每个data-item分配宽度和基础样式 */
  border-style: solid;
}

问题根源： 从上述代码中可以看出，*ngFor指令直接作用于<div class="data-item">。这意味着无论item.Value是否为空，<div class="data-item">这个元素都会被创建并添加到DOM中。*ngIf="item.Value !== ''"只作用于<div *ngIf="item.Value !== ''">这个内部的div。因此，当item.Value为空时，内部的div及其内容确实不会被渲染，但外部的<div class="data-item">依然存在于DOM中，并会根据其CSS样式（例如flex: 0 0 21%; border-style: solid;）占据空间并显示边框，从而形成一个空白的“盒子”。这导致了视觉上的不一致和不必要的布局空间占用。

解决方案：正确应用 *ngIf 并利用 ng-container

要解决这个问题，我们需要确保整个“盒子”——即<div class="data-item">——只在满足条件时才被渲染。

修正后的HTML结构：

<div class="content">
  <ng-container *ngFor="let item of dataSource">
    <!-- *ngIf直接作用于data-item div -->
    <div *ngIf="item.Value !== ''" class="data-item">
      <div>{{item.Header}}</div>
      <div>{{item.Value}}</div>
    </div>
  </ng-container>
</div>

代码解析：

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

28

查看详情

1. *`ngIf="item.Value !== ''"移动到

   上：** 现在，*ngIf指令直接应用于

   。这意味着只有当item.Value不为空时，整个

   元素（包括其内部的所有内容和CSS样式）才会被添加到DOM中。如果item.Value为空，那么这个

   `将不会被渲染，从而彻底避免了空盒子的出现。

2. 引入 <ng-container>：ng-container是一个Angular特有的元素，它不会被渲染到DOM中，也不会影响任何布局或样式。它的主要作用是作为一个逻辑分组，允许我们对多个元素应用结构型指令（如*ngFor、*ngIf），而无需引入额外的DOM节点。 在这个例子中，*ngFor="let item of dataSource"现在作用于<ng-container>。由于ng-container自身不会产生DOM元素，它只是提供了一个上下文来循环dataSource数组。在每次循环中，它会尝试渲染其内部的<div *ngIf="item.Value !== ''" class="data-item">。这种方式既实现了循环，又避免了为*ngFor本身引入一个不必要的包装div，保持了DOM的清洁。

完整示例代码

为了更清晰地展示，以下是完整的TypeScript和CSS代码，结合上面修正后的HTML：

TypeScript (app.component.ts):

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  dataSource: items[] = [
    {Header: 'Header A1', Value: 123},
    {Header: 'Header B2', Value: 234},
    {Header: 'Header C3', Value: ''}, // 此项Value为空，对应的data-item将不渲染
    {Header: 'Header D4', Value: 456},
    {Header: 'Header E5', Value: ''}, // 此项Value为空，对应的data-item将不渲染
    {Header: 'Header F6', Value: 678},
    {Header: 'Header G7', Value: 789},
  ]
}

export interface items{
  Header: string;
  Value: any;
}

登录后复制

CSS (app.component.css):

.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.data-item {
  flex: 0 0 21%;
  border-style: solid;
  padding: 10px; /* 增加内边距使内容更清晰 */
  margin: 5px; /* 增加外边距使盒子之间有间隔 */
  box-sizing: border-box; /* 确保padding和border不增加元素总宽度 */
}

登录后复制

通过这种调整，当item.Value为空时，对应的<div class="data-item">将不会出现在DOM中，从而彻底解决了空盒子显示的问题。页面布局将更加紧凑和符合预期。

注意事项与最佳实践

• *`ngIf的性能考量：***ngIf会销毁和重建DOM元素，这在处理大量或复杂组件时可能会有性能开销。如果只是需要切换元素的可见性而不希望销毁它们，可以考虑使用[hidden]属性（它只是应用display: none;`样式）或CSS类切换。然而，在本教程的场景中，完全移除空元素是最佳实践，因为它减少了DOM节点数量，优化了内存占用和渲染性能。
• ng-container 的适用场景： ng-container 是一个非常实用的工具，尤其当你在循环或条件渲染中不想引入额外的DOM元素时。它在以下场景中特别有用：
  • 在*ngFor内部，你希望应用*ngIf到一个没有共同父元素的兄弟元素组。
  • 当你需要在一个模板中应用多个结构型指令，但又不想嵌套div。
  • 在某些组件库中，为了避免破坏其内部结构，ng-container可以作为安全的包装器。
• 条件表达式的健壮性： 在实际应用中，item.Value !== ''可能需要更复杂的检查，例如item.Value !== null && item.Value !== undefined && item.Value !== ''，或者根据数据类型进行更严格的验证，以确保所有“空”状态都被正确处理。

总结

正确使用Angular的结构型指令对于构建高效、整洁的用户界面至关重要。通过将*ngIf指令应用于你希望条件性渲染的整个容器元素，并结合ng-container来避免不必要的DOM包装，我们可以有效地解决条件渲染时出现空盒子的问题。这种方法不仅优化了DOM结构，也提升了页面的视觉一致性和用户体验。掌握这些技巧将帮助你编写出更健壮、更专业的Angular代码。