Angular10 HTML模板中全局数组变量与类型声明不匹配问题

问题核心原因 #

你定义的ReservationCurrentPC是对象数组，每个数组元素要求是包含StartDateTime、EndDateTime、Who三个属性的对象，但你执行push操作时，直接把三个字符串作为独立元素塞进了数组，最终数组里存的是3个独立字符串，而不是1个符合结构的对象，这就是模板循环3次、无法读取属性的根本原因。

修复方案 #

1. 修正push操作

把原push代码改成传入符合类型定义的对象即可：

case 'RSV':
    // stemp[i].Param1 = PCNameID.
    // stemp[i].Param2 = StartDate.
    // stemp[i].Param3 = EndDate.
    // stemp[i].Param4 = ReserveByAccountName.
    GlobalVariables.ReservationsCurrentPC.push({
        StartDateTime: stemp[i].Param2,
        EndDateTime: stemp[i].Param3,
        Who: stemp[i].Param4
    });

修改后数组每个元素都是符合结构的对象，模板就能正常读取对应属性。

2. 可选优化：用Angular单例服务替代静态类做全局状态共享

当前你用静态类存全局变量，Angular场景下更推荐用根级注入的单例服务实现跨组件状态共享，能避免静态类可能出现的变更检测不触发、状态不可控问题，实现方式如下：

• 生成服务：执行命令 ng generate service services/global-reservation
• 服务代码：

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

export type ReservationCurrentPC = Array<{StartDateTime: string, EndDateTime: string, Who: string}>;

@Injectable({
  providedIn: 'root' // 根级注入，全局唯一实例
})
export class GlobalReservationService {
  private reservations: ReservationCurrentPC = [];

  // 获取所有预约
  getReservations(): ReservationCurrentPC {
    return [...this.reservations];
  }

  // 新增预约
  addReservation(reservation: ReservationCurrentPC[number]) {
    this.reservations.push(reservation);
  }

  // 删除预约
  removeReservation(startDateTime: string) {
    this.reservations = this.reservations.filter(item => item.StartDateTime !== startDateTime);
  }
}

• 组件中直接注入服务使用即可，状态变更后的模板更新会更稳定。

注意事项 #

如果修改后还是出现模板不更新的情况，检查你的push操作是不是在Angular NgZone外执行（比如第三方地图的原生回调默认不在NgZone内），可以把修改状态的代码包进NgZone.run()里触发变更检测。

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