Angular中如何处理ngIf条件内的undefined值以确保元素显示？

方法1：修改products管道返回默认空数组 #

在你的products管道中添加空值处理逻辑，当输入为undefined或null时返回空数组[]：

@Pipe({ name: 'products' })
export class ProductsPipe implements PipeTransform {
  transform(value: any): any[] {
    if (!value) return [];
    // 原有转换逻辑
    return /* 你的管道处理代码 */;
  }
}

这样无论新订单是否有产品，经过管道后products都会是数组（空数组或有内容的数组），*ngIf条件始终为真，div会正常显示。

方法2：模板内直接处理空值 #

如果不想修改管道，可在模板中为管道结果设置默认空数组，确保products永远是数组类型：

<div
  *ngIf="
    (order
      | map: 'product'
      | products
      | ngrxPush) || [] as products
  "
>
<!-- Order info -->
<!-- 遍历产品时直接用*ngFor="let product of products"，空数组时不会渲染任何项 -->
</div>

方法3：移除div上的*ngIf，改用内部容器处理 #

若希望div始终存在，可将*ngIf移到内部<ng-container>中，同时处理空状态：

<div>
  <ng-container *ngIf="order | map: 'product' | products | ngrxPush as products">
    <!-- 有产品时展示的内容 -->
    <div *ngFor="let product of products">
      {{ product.name }}
    </div>
  </ng-container>
  <!-- 无产品时展示空状态或添加按钮 -->
  <div *ngIf="!products">
    <button (click)="addProduct()">添加产品</button>
  </div>
</div>

方法4：初始化订单对象的products属性 #

创建新订单时，提前给order.product赋值为空数组[]，避免管道处理时得到undefined：

// 组件中初始化新订单
this.order = {
  // 其他订单属性
  product: []
};

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