Angular中ngIf与ngFor结合：避免渲染空元素容器的策略

本文旨在解决angular应用中，当使用`*ngfor`循环渲染列表，并尝试通过`*ngif`条件性显示内容时，仍出现空容器（如带有边框的`div`）的问题。通过深入分析`*ngif`和`*ngfor`的作用范围，教程将展示如何正确放置`*ngif`指令，并利用`ainer>`优化模板结构，确保只有符合条件的元素及其容器才会被渲染到dom中，从而实现更精细和高效的条件渲染。

理解*ngIf与*ngFor的交互行为

在Angular开发中，我们经常需要遍历数据列表并根据特定条件显示或隐藏其中的部分内容。然而，一个常见的误区是，即使内部内容被*ngIf隐藏，其外部的容器元素（如带有样式或边框的div）仍然可能被渲染，导致页面上出现不必要的空白区域或空盒子。

考虑以下场景，我们有一个数据源，其中包含一些可能为空的Value字段。我们希望只显示那些Value不为空的数据项，并且每个数据项都包裹在一个带有样式的容器中。

原始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>

对应的CSS样式：

.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.data-item {
  flex: 0 0 21%; /* 每个项目占据21%宽度，形成多列布局 */
  border-style: solid; /* 为每个项目添加边框 */
  border-width: 1px;
  border-color: #ccc;
  margin: 5px;
  padding: 10px;
}

数据源示例 (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="let item of dataSource"会为dataSource中的每一个item创建一个div.data-item元素。当item.Value为空时，*ngIf="item.Value !== ''"会移除其所在的内部div（包含{{item.Header}}和{{item.Value}}），但外部的div.data-item本身仍然存在于DOM中。由于div.data-item定义了边框和布局样式，即使内部内容为空，它也会占据页面空间并显示边框，导致出现空的盒子。

解决方案：正确放置*ngIf指令

要解决这个问题，关键在于将*ngIf指令应用于我们希望进行条件渲染的整个容器元素，而不仅仅是其内部内容。这意味着，如果一个数据项的Value为空，那么整个div.data-item都不应该被渲染。

BibiGPT-哔哔终结者

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

28

查看详情

为了实现这一点，我们可以将*ngIf指令直接放在div.data-item上。同时，为了避免*ngFor在DOM中创建额外的包裹元素（如果*ngFor和*ngIf直接放在同一个元素上，Angular会要求使用<ng-container>或将其中一个指令移到父元素），我们可以引入Angular提供的特殊元素<ng-container>。

<ng-container>是一个不渲染到DOM中的逻辑分组元素。它非常适合用来承载结构型指令（如*ngFor、*ngIf），而不会在最终的HTML结构中添加任何额外的div或其他标签。

修正后的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>

解释：

1. *`<ng-container ngFor="let item of dataSource">**:*ngFor现在作用于。这意味着对于dataSource中的每个item，Angular都会在逻辑上创建一个上下文，但不会在DOM中生成一个实际的`元素。
2. *`<div ngIf="item.Value !== ''" class="data-item">**:*ngIf指令现在直接作用于div.data-item。只有当item.Value不为空时，整个div.data-item（包括其内部内容和样式）才会被渲染到DOM中。如果item.Value为空，那么这个div.data-item`将完全不会出现在DOM中，从而避免了空盒子的渲染。

通过这种方式，我们确保了只有那些真正有内容的data-item容器才会被创建和显示，极大地优化了页面的渲染效率和视觉整洁度。

总结与最佳实践

• 理解结构型指令的作用范围：*ngIf和*ngFor等结构型指令会根据条件添加或移除其宿主元素及其子元素。因此，将*ngIf放置在正确的宿主元素上至关重要。
• 利用<ng-container>：当需要在不引入额外DOM元素的情况下使用结构型指令进行逻辑分组时，<ng-container>是理想的选择。它有助于保持DOM结构的扁平化和清洁。
• 避免冗余渲染：始终思考哪些元素是真正需要条件性渲染的，并将*ngIf直接应用于这些元素。这不仅解决了视觉上的问题，也提高了应用的性能，因为浏览器不需要渲染和布局那些最终被隐藏的元素。

遵循这些原则，可以更有效地管理Angular模板中的条件渲染逻辑，构建出更健壮、高效且用户体验更佳的应用。

以上就是Angular中ngIf与ngFor结合：避免渲染空元素容器的策略的详细内容，更多请关注php中文网其它相关文章！