Angular中*ngIf仍渲染空盒子的原因及解决方法

你当前的问题根源是：*ngFor会遍历整个dataSource数组，每个元素都会生成对应的.data-item容器，内部的*ngIf仅隐藏了容器内的内容，并未移除容器本身。以下是两种可行的解决方法：

方法一：在模板中控制容器渲染 #

用<ng-container>承载循环逻辑，将*ngIf移到.data-item元素上，这样空值对象对应的容器会直接不被渲染：

修改后的HTML代码：

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

方法二：在TS中提前过滤数据 #

在组件类中创建过滤后的数组，仅保留Value不为空的对象，模板直接循环这个处理后的数组：

修改后的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},
  ];

  // 过滤空值对象的 getter
  get filteredDataSource() {
    return this.dataSource.filter(item => item.Value !== '');
  }
}

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

对应的HTML代码：

<div class="content">
  <div class="data-item" *ngFor="let item of filteredDataSource">
    <div>{{item.Header}}</div>
    <div>{{item.Value}}</div>
  </div>
</div>

两种方法都能彻底移除空值对象对应的.data-item容器，推荐第二种方法——数据过滤逻辑放在组件类中，模板更简洁，也便于后续维护过滤规则。

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