Angular 12 NgOnChanges报错：Cannot read properties of null (reading 'carrierStatusId')

问题根源是清空选中项时changes.carrier.currentValue变为null，直接访问其属性会触发Cannot read properties of null错误。只需在访问属性前添加简单的空值校验即可解决，以下是几种简洁的实现方式：

方式1：使用可选链操作符（推荐） #

TypeScript的可选链?.会在左侧值为null/undefined时直接返回undefined，不会继续访问后续属性，代码简洁且安全：

public carrierCorporateStatusEnum = CarrierCorporateApprovalStatus;
public carrierStatusEnum = CarrierStatus;
public carrierAddendumStatusEnum = CarrierAddendumStatus;

ngOnChanges(changes: SimpleChanges) {
  // 先确认carrier属性有变化，同时避免currentValue为null时的无效判断
  if (changes.carrier && changes.carrier.currentValue !== changes.carrier.previousValue) {
    this.carrier = changes.carrier.currentValue;
    this.corporateStatus = changes.corporateStatus?.currentValue; // 给corporateStatus也加一层校验，防止未变化时的异常
    this.carrierStatus = changes.carrier.currentValue?.carrierStatusId;
    this.carrierAddendumStatus = changes.carrier.currentValue?.addendumStatus;
  }
}

方式2：传统条件判断（兼容低版本TypeScript） #

如果项目不支持可选链语法，可通过if判断先确认值不为null：

public carrierCorporateStatusEnum = CarrierCorporateApprovalStatus;
public carrierStatusEnum = CarrierStatus;
public carrierAddendumStatusEnum = CarrierAddendumStatus;

ngOnChanges(changes: SimpleChanges) {
  if (changes.carrier) {
    const currentCarrier = changes.carrier.currentValue;
    if (currentCarrier !== changes.carrier.previousValue) {
      this.carrier = currentCarrier;
      this.corporateStatus = changes.corporateStatus?.currentValue;
      
      // 仅当currentCarrier不为null时才访问属性，否则重置变量
      if (currentCarrier) {
        this.carrierStatus = currentCarrier.carrierStatusId;
        this.carrierAddendumStatus = currentCarrier.addendumStatus;
      } else {
        this.carrierStatus = undefined;
        this.carrierAddendumStatus = undefined;
      }
    }
  }
}

额外提示 #

• 必须先检查changes.carrier是否存在，因为ngOnChanges会监听所有输入属性的变化，某次触发时carrier可能并未发生变更。
• 清空选中项时，可根据业务需求给carrierStatus和carrierAddendumStatus设置默认值（比如null、undefined或枚举的默认选项）。

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