Angular中*ngIf与*ngFor结合使用时避免空元素渲染的策略_技术教程

本文探讨了在angular应用中，当使用`*ngfor`遍历数据并结合`*ngif`进行条件渲染时，如何避免因`*ngif`位置不当导致空容器（如空盒子）仍然显示的问题。核心解决方案是将`*ngif`直接应用于需要条件隐藏的容器元素上，并结合`ng-container`优化`*ngfor`的dom结构，确保仅有有效数据对应的ui元素被渲染，从而实现更精确的ui控制。

问题分析：*ngIf位置不当导致的空容器显示

在Angular开发中，我们经常需要根据数据条件来渲染或隐藏DOM元素。然而，当*ngFor和*ngIf指令结合使用时，如果*ngIf的位置不当，可能会导致意外的UI表现。例如，一个外部容器元素（如div）即使其内部内容因*ngIf条件不满足而被移除，该外部容器本身仍然可能存在于DOM中，并受CSS样式影响而显示为一个“空盒子”。

考虑以下初始的HTML结构示例：

 
  
   {{item.Header}}
   {{item.Value}}

以及对应的CSS样式片段：

.content {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.data-item{
flex: 0 0 21%;
border-style: solid;
}

配套的TypeScript数据源：

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为空
    {Header: 'Header D4', Value: 456},
    {Header: 'Header E5', Value: ''}, // 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会移除内部的div，但外部的.data-item div依然存在于DOM中。由于.data-item被赋予了border-style和flex布局属性，它会作为一个带有边框的空盒子显示在页面上，这与预期只显示有内容的项的目标不符。

*ngIf的工作原理与DOM操作

*ngIf是一个结构型指令，它的核心作用是根据条件在DOM中添加或移除元素及其子树。当条件为false时，*ngIf会从DOM中完全移除它所附加的元素及其所有子元素。当条件为true时，它会将元素及其子树重新插入到DOM中。

理解这一点至关重要：*ngIf只影响它所附加的那个元素本身。如果*ngIf附加在一个内部元素上，它无法控制其父级元素的渲染。因此，要完全隐藏一个“盒子”或“容器”，*ngIf必须直接应用于该容器元素。

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

要解决上述问题，核心思路是将*ngIf指令移动到我们希望根据条件隐藏的那个容器元素上。在本例中，即是带有data-item类的div。同时，为了在*ngFor和*ngIf都需要作用于同一个逻辑层级时避免引入不必要的DOM元素，我们可以使用ng-container。

ng-container是Angular提供的一个逻辑分组元素，它不会被渲染到DOM中，但可以作为结构型指令（如*ngFor、*ngIf）的宿主。这使得我们可以在不污染DOM结构的前提下，灵活地应用多个结构型指令。

修改后的HTML代码如下：

  
    
      {{item.Header}}
      {{item.Value}}

代码解析：

*ngFor="let item of dataSource" 现在被应用到了上。这意味着ng-container将为dataSource中的每个item生成一个逻辑上下文，但它本身不会在DOM中留下任何实际的HTML元素。
*ngIf="item.Value !== ''" 和 class="data-item" 被同时应用到了内部的div上。这样一来，只有当item.Value不为空字符串时，这个带有data-item类和内容的div才会被渲染到DOM中。如果item.Value为空，则整个data-item div（包括其边框和内部内容）都不会被渲染，从而彻底避免了空盒子的显示。

注意事项与总结

指令优先级： 当*ngFor和*ngIf同时应用于一个元素时，*ngFor的优先级高于*ngIf。这意味着*ngFor会先遍历数据生成多个实例，然后每个实例再独立判断*ngIf条件。为了更精确地控制渲染，通常建议将*ngIf放在*ngFor生成的每个元素内部（即作为*ngFor子元素），或者像本例一样，使用ng-container将*ngFor包裹起来，再在内部的实际元素上应用*ngIf。
ng-container的作用： ng-container在需要应用结构型指令但又不想引入额外DOM元素时非常有用。它是一个纯粹的逻辑分组，不会干扰页面的布局或样式，是处理复杂结构型指令组合的理想选择。
条件判断： 在比较空值时，使用严格不相等运算符!==通常比!=更安全，因为它会同时检查值和类型。例如，null和undefined在!= ''的判断中可能表现不同，而!== ''则能更准确地判断是否为空字符串。
UI一致性： 始终思考*ngIf指令应用的位置，以确保它能够准确地隐藏或显示你期望的整个UI组件或容器，而不是仅仅移除其内部内容。

通过正确理解*ngIf的工作原理并巧妙利用ng-container，我们可以有效地控制Angular应用中的DOM渲染，避免不必要的空元素，从而创建出更精确、更符合预期的用户界面。