*ngFor遍历遇未定义值中断，如何使其继续执行？

我之前也踩过类似的坑，咱们一步步拆解解决：

首先你提到用了{{order?.shipping.name}}还是不行，这里大概率是可选链只加了一层的问题——如果order存在，但order.shipping本身是null或undefined，那么访问shipping.name依然会抛出错误，直接中断*ngFor的渲染流程。

核心修复：使用双层可选链 #

把插值表达式改成：

{{ order?.shipping?.name }}

这样不管是order未定义，还是shipping未定义，都不会抛出错误，只会返回undefined，不会打断整个循环的执行。

进阶优化：加兜底默认值 #

如果不想显示空白，可以结合空值合并操作符给个默认文本：

{{ order?.shipping?.name ?? '未填写' }}

保险方案：用*ngIf提前过滤无效项 #

如果某些order本身就没有shipping属性，你可以在模板里用ng-container提前判断，避免无效渲染逻辑：

<div *ngFor="let order of orders">
  <!-- 只有当shipping存在时才渲染这个部分 -->
  <ng-container *ngIf="order?.shipping">
    {{ order.shipping.name }}
  </ng-container>
  <!-- 其他正常的插值表达式不受影响 -->
  {{ order.orderNumber }}
  {{ order.totalAmount }}
</div>

根源排查：检查数据源 #

另外建议你在组件里打印一下orders数组，看看是不是其中某个order项本身就是null/undefined，或者shipping字段的类型不符合预期（比如是字符串而非对象）。如果是数据源的问题，最好在组件逻辑里先过滤掉无效项：

// 组件内预处理数组，过滤掉无有效shipping的order
validOrders = this.orders.filter(order => order && order.shipping);

之后模板里直接遍历validOrders即可从根源避免问题。

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