如何在Angular中隐藏无对应内容的HTML标题Div

要实现当所有内容字段为空时隐藏包含"Entrega"标题的父Div，可按以下步骤操作：

1. 模板绑定与条件渲染 #

修改HTML模板，将内容字段绑定到组件数据，并使用*ngIf指令控制父Div的显示：

<div *ngIf="hasDeliveryContent()">
    <b>Entrega</b>

    <div class="custom-control">ID da Entrega: {{ delivery.idEntrega }}</div>
    <div class="custom-control">ID Estoque de Origem: {{ delivery.idEstoqueOrigem }}</div>
    <div class="custom-control">ID Itenção de Venda: {{ delivery.idIntencaoVenda }}</div>
    <div class="custom-control">Situação: {{ delivery.situacao }}</div>
    <div class="custom-control">CNPJ Entregador: {{ delivery.cnpjEntregador }}</div>
    <div class="custom-control">Empresa Entregadora: {{ delivery.empresaEntregadora }}</div>
    <div class="custom-control">CNPJ Vendedor: {{ delivery.cnpjVendedor }}</div>
    <div class="custom-control">Empresa Vendedora: {{ delivery.empresaVendedora }}</div>
    <div class="custom-control">DH Entrega: {{ delivery.dhEntrega | date:'dd/MM/yyyy HH:mm' }}</div>
    <div class="custom-control">DH Cancelamento: {{ delivery.dhCancelamento | date:'dd/MM/yyyy HH:mm' }}</div>
    <div class="custom-control">Gerado por cancelamento? {{ delivery.geradoPorCancelamento ? 'Sim' : 'Não' }}</div>
    <div class="custom-control">ID gerado por cancelamento Entrega: {{ delivery.idGeradoPorCancelamento }}</div>
    <div class="custom-control">ID Entrega Origem Cancel. Saída: {{ delivery.idEntregaOrigemCancelamento }}</div>
    <div class="custom-control">Motivo Cancelamento: {{ delivery.motivoCancelamento }}</div>
</div>

2. 组件类实现内容判断逻辑 #

在组件中定义数据模型和判断方法，检查所有内容字段是否至少有一个有效值：

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

// 定义交付数据模型
interface Delivery {
  idEntrega?: string;
  idEstoqueOrigem?: string;
  idIntencaoVenda?: string;
  situacao?: string;
  cnpjEntregador?: string;
  empresaEntregadora?: string;
  cnpjVendedor?: string;
  empresaVendedora?: string;
  dhEntrega?: Date;
  dhCancelamento?: Date;
  geradoPorCancelamento?: boolean;
  idGeradoPorCancelamento?: string;
  idEntregaOrigemCancelamento?: string;
  motivoCancelamento?: string;
}

@Component({
  selector: 'app-delivery-section',
  templateUrl: './delivery-section.component.html',
  styleUrls: ['./delivery-section.component.css']
})
export class DeliverySectionComponent {
  delivery: Delivery = {}; // 从API或数据源赋值

  hasDeliveryContent(): boolean {
    // 遍历所有字段，判断是否存在有效内容
    return Object.values(this.delivery).some(value => {
      if (value === null || value === undefined) return false;
      // 过滤空字符串（含纯空格）
      if (typeof value === 'string') return value.trim() !== '';
      // 布尔值即使为false也视为有效内容（明确状态）
      if (typeof value === 'boolean') return true;
      // 检查日期是否有效
      if (value instanceof Date) return !isNaN(value.getTime());
      return true;
    });
  }
}

3. 可选优化：使用纯管道提升性能 #

如果担心模板中调用方法频繁触发变更检测，可以创建一个纯管道实现内容判断：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'hasContent'
})
export class HasContentPipe implements PipeTransform {
  transform(obj: any): boolean {
    if (!obj) return false;
    return Object.values(obj).some(value => {
      if (value === null || value === undefined) return false;
      if (typeof value === 'string') return value.trim() !== '';
      if (typeof value === 'boolean') return true;
      if (value instanceof Date) return !isNaN(value.getTime());
      return true;
    });
  }
}

模板中直接使用管道：

<div *ngIf="delivery | hasContent">
    <!-- 标题与内容区块 -->
</div>

关键注意点 #

• 确保所有内容字段都正确绑定到组件变量，无遗漏；
• 布尔类型字段需特殊处理：即使值为false也属于明确状态，应视为有内容；
• 日期类型要验证有效性，避免无效日期被误判为有内容。

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