Angular中*ngIf与*ngFor结合使用时避免渲染空容器的指南

本教程旨在解决angular应用中，当使用`*ngif`条件性渲染元素时，其父容器仍可能显示为空白框的问题。文章将深入分析`*ngif`的工作原理，解释为何不当的指令放置会导致空容器渲染，并提供一个使用`ng-container`和正确指令位置的解决方案，确保只有包含有效数据的元素才会被渲染，从而优化页面布局和用户体验。

理解Angular中*ngIf与容器渲染的挑战

在Angular开发中，我们经常需要根据数据条件来动态显示或隐藏DOM元素。*ngIf是一个强大的结构型指令，它能够从DOM中添加或移除元素，而非仅仅隐藏它们。然而，当*ngIf与*ngFor等其他结构型指令结合使用，并且涉及到多层嵌套的HTML结构时，开发者可能会遇到一个常见问题：即使内部内容被*ngIf成功移除，外部的容器元素（如div）仍然被渲染，导致页面上出现空白的占位框。

考虑以下场景：我们有一个数据源，其中包含一些带有空值的项。我们的目标是只显示那些具有非空值的项，并且完全移除对应的容器。

原始代码示例：

<!-- app.component.html (原始) -->
<div class="content">
 <div class="data-item" *ngFor="let item of dataSource">
  <div *ngIf="item.Value != ''" >
   <div>{{item.Header}}</div>
   <div>{{item.Value}}</div>
  </div>
 </div>
</div>

/* app.component.css */
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.data-item{
  flex: 0 0 21%; /* 每个项目占据约21%的宽度，形成网格布局 */
  border-style: solid; /* 边框样式，使其可见 */
}

// 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: ''}, // 空值
    {Header: 'Header D4', Value: 456},
    {Header: 'Header E5', Value: ''}, // 空值
    {Header: 'Header F6', Value: 678},
    {Header: 'Header G7', Value: 789},
  ]
}

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

在此示例中，*ngFor遍历dataSource数组，为每个item创建一个data-item的div。*ngIf="item.Value != ''"则应用于data-item内部的一个div。当item.Value为空时，*ngIf会移除其内部的Header和Value显示div，但data-item本身（带有边框和flex布局属性）仍然存在于DOM中，导致页面上出现空白的方框。

问题根源分析

问题的核心在于*ngIf指令的应用位置。*ngIf只会影响它所附加的元素及其子元素。在上述代码中，*ngIf被放置在data-item容器内部的div上。这意味着：

1. *ngFor="let item of dataSource"会为dataSource中的每一个元素（包括空值项）创建一个data-item的div。
2. 当item.Value为空时，*ngIf会移除内部的div（包含{{item.Header}}和{{item.Value}}），但并不会移除data-item这个外部的div。
3. 由于data-item这个div仍然存在于DOM中，并且其CSS样式（例如border-style: solid;和flex: 0 0 21%;）依然生效，因此即使内容为空，它仍然会占据空间并显示边框，形成一个空白框。

为了彻底解决这个问题，我们需要确保*ngIf指令能够直接控制我们希望条件性渲染或移除的整个容器元素。

解决方案：*ngIf与ng-container的正确应用

要解决上述问题，我们需要将*ngIf指令应用到我们希望完全移除的那个容器元素上，即data-item这个div。然而，Angular不允许在同一个元素上同时使用两个结构型指令（如*ngFor和*ngIf）。这时，ng-container就派上用场了。

ng-container是一个特殊的Angular元素，它不会被渲染到DOM中，但可以作为结构型指令的宿主。这使得我们可以在不引入额外DOM节点的情况下，灵活地组织和应用多个结构型指令。

ImgGood

免费在线AI照片编辑器

下载

修正后的HTML代码：

<!-- app.component.html (修正后) -->
<div class="content">
  <!-- ng-container作为*ngFor的宿主，不生成实际DOM元素 -->
  <ng-container *ngFor="let item of dataSource">
    <!-- *ngIf直接应用于data-item，只有当item.Value不为空时才渲染整个data-item -->
    <div *ngIf="item.Value != ''" class="data-item">
      <div>{{item.Header}}</div>
      <div>{{item.Value}}</div>
    </div>
  </ng-container>
</div>

解决方案说明：

1. *`ngFor移动到ng-container：** 我们将*ngFor="let item of dataSource"指令从data-item`div移动到了ng-container上。ng-container本身不会在最终的DOM中生成任何元素，它仅仅是一个逻辑上的分组，用于承载结构型指令。
2. *`ngIf直接应用于data-item：** 现在，*ngIf="item.Value != ''"指令被直接应用于data-item这个div上。这意味着，只有当item.Value不为空字符串时，整个data-item`div（包括其内部的所有内容和CSS样式）才会被添加到DOM中。
3. 消除空容器： 当item.Value为空时，*ngIf会阻止data-item``div及其所有内容被渲染。这样，页面上就不会出现任何空白的占位框，从而实现了预期的效果。

完整代码示例（修正后）：

<!-- app.component.html -->
<div class="content">
  <ng-container *ngFor="let item of dataSource">
    <div *ngIf="item.Value != ''" class="data-item">
      <div>{{item.Header}}</div>
      <div>{{item.Value}}</div>
    </div>
  </ng-container>
</div>

/* app.component.css (保持不变) */
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.data-item{
  flex: 0 0 21%;
  border-style: solid;
}

// 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: ''},
    {Header: 'Header D4', Value: 456},
    {Header: 'Header E5', Value: ''},
    {Header: 'Header F6', Value: 678},
    {Header: 'Header G7', Value: 789},
  ]
}

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

通过这种调整，当item.Value为空时，对应的data-item将不会被渲染到DOM中，从而彻底解决了空白框的问题，使页面布局更加紧凑和符合预期。

总结与最佳实践

在Angular中处理条件性渲染和列表循环时，正确理解结构型指令的作用范围至关重要。

• *ngIf的精确性：* 始终将`ngIf`应用于你希望根据条件完全添加或移除的最外层**元素。
• ng-container的妙用： 当需要在同一个逻辑层级上应用多个结构型指令（如*ngFor和*ngIf）时，或者不希望引入额外的DOM节点时，ng-container是理想的选择。它提供了一种干净的方式来组织指令，而不会污染DOM结构。
• CSS布局的考虑： 当元素被动态添加或移除时，确保你的CSS布局（尤其是像flex或grid这样的弹性布局）能够优雅地适应这些变化，避免出现意外的间距或布局问题。

通过遵循这些原则，你可以更有效地管理Angular应用中的DOM渲染，创建出响应迅速且布局精确的用户界面。