Angular如何遍历部分键未定义的对象 跳过undefined避免遍历终止

错误原因 #

你遇到的报错由两个可能的原因导致：

1. 你没有给objectB设置初始空对象{}，导致objectB本身为undefined，尝试读取objectB[day.date]时直接抛出无法读取属性的异常
2. 即使objectB正确初始化，当对应日期无预约时objectB[day.date]返回undefined，*ngFor不支持遍历undefined值，同样会触发异常终止渲染

解决方案 #

第一步：先确保TS中objectB初始化正确 #

在组件的TS代码中，给objectB设置初始值：

// 不要只声明不赋值，要初始化为空对象
objectB: Record<string, Appointment[]> = {};

第二步：模板中兼容无预约的日期 #

方案1：空值合并运算符（最简洁，Angular 12+适用）

直接给*ngFor的遍历源设置空数组作为默认 fallback，无预约的日期会自动跳过遍历，不会生成多余DOM：

<tbody>
     <tr>
         <td *ngFor="let day of objectA">
             <div *ngFor="let app of objectB[day.date] ?? []">
                 <span>{{ app.startTime | date : 'HH:mm' }}</span>
             </div>         
         </td>
     </tr>
 </tbody>

方案2：ngIf判断（兼容低版本Angular）

如果你的Angular版本低于12，不支持空值合并运算符，可以用ng-container加判断，只有存在对应日期的预约时才遍历：

<tbody>
     <tr>
         <td *ngFor="let day of objectA">
             <ng-container *ngIf="objectB[day.date] as appointmentList">
               <div *ngFor="let app of appointmentList">
                   <span>{{ app.startTime | date : 'HH:mm' }}</span>
               </div>
             </ng-container>
         </td>
     </tr>
 </tbody>

ng-container是Angular提供的逻辑容器，不会生成额外的DOM节点，不会破坏你的表格布局。

方案3：TS层预处理数据（复杂业务场景推荐）

如果后续还要对日期、预约做更多逻辑处理，可以在TS层提前合并两个对象的数据，模板直接使用处理好的集合即可：

// TS中预处理数据
processedDayList = Object.values(this.objectA).map(dayItem => ({
  ...dayItem,
  appointments: this.objectB[dayItem.date] || []
}))

模板代码简化为：

<td *ngFor="let day of processedDayList">
  <div *ngFor="let app of day.appointments">
    <span>{{ app.startTime | date : 'HH:mm' }}</span>
  </div>         
</td>

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