Angular中TypeScript设置inPackage为空数组时触发Undefined错误求助

错误根源 #

1. businessPayload被初始化为null，直接访问this.businessPayload.business时，由于businessPayload本身是null，会触发属性访问错误。
2. 即使businessPayload被正确实例化，business是可选属性（带有?修饰符），默认状态下为undefined，直接设置business.inPackage同样会因为business未定义而报错。

可行解决方案 #

方案1：组件内手动初始化嵌套属性 #

先实例化BusinessPayload对象，再确保business属性存在后设置inPackage：

businessPayload: BusinessPayload = new BusinessPayload();

ngOnInit() {
  // 先初始化business对象
  this.businessPayload.business = {
    inPackage: [],
    status: '' // 根据业务需求设置默认状态值
  };
}

如果仅需重置inPackage而保留原有business的其他属性，可先判断business是否存在：

ngOnInit() {
  this.businessPayload.business = this.businessPayload.business || {};
  this.businessPayload.business.inPackage = [];
}

方案2：在类构造函数中预设默认值 #

修改BusinessPayload类，在构造函数中初始化business和必填的description属性，这样实例化对象时会自动生成默认结构：

export class BusinessPayload implements Business {
  _id?: string;
  business?: {
    inPackage: string[];
    status: string;
  };
  description: string;

  constructor() {
    this.business = {
      inPackage: [],
      status: ''
    };
    this.description = ''; // description为必填属性，必须初始化
  }
}

组件中直接实例化后即可操作inPackage：

businessPayload: BusinessPayload = new BusinessPayload();

ngOnInit() {
  this.businessPayload.business.inPackage = [];
}

方案3：使用安全访问语法处理空值 #

如果需要兼容businessPayload可能为null的场景，可结合空值合并操作符确保每一层属性都存在：

ngOnInit() {
  this.businessPayload = this.businessPayload || new BusinessPayload();
  this.businessPayload.business = this.businessPayload.business || { inPackage: [], status: '' };
  this.businessPayload.business.inPackage = [];
}

内容的提问来源于stack exchange，提问作者A.Mac