Angular组件模板报Object is possibly 'null'错误解决方法

Angular 11 基于 Ivy 的模板类型检查器无法对跨节点的可选链（?.）表达式做自动类型收窄：你在外层 <ng-container> 的 *ngIf 中写的空值判断，不会被识别为对内部 cartItem.qty 的非空担保，类型检查器依然认为内部访问的 cartItem?.qty 可能为 null 或 undefined，因此持续抛出如下错误：

Object is possibly 'null' or 'undefined'.ngtsc(2533)

按推荐优先级从高到低排列：

• 使用*ngIf as 语法做模板变量类型收窄（零额外逻辑，类型安全）
  把空值判断的结果直接存为模板本地变量，类型检查器会自动将该变量标记为非空类型，无需额外改动组件逻辑：

  <ng-container *ngIf="cartItem?.qty !== null && cartItem?.qty !== undefined; let validQty">
    <app-alert 
      *ngIf="validQty < 1"
      type="error"
      [dismissible]="false">
      You have to specify a quantity of at least one 
    </app-alert>
  </ng-container>
  

  这种写法完全符合类型检查规则，运行时也不会有空指针风险，是最适配Angular模板机制的写法。

• 组件层做值兜底（长期维护成本最低）
  既然后端返回结构不可修改，可以在接口响应赋值到组件属性时，提前做空值兜底，从根源上消除空值可能，模板不需要再写额外的空判断：

  // 组件中定义接口返回的兜底默认值
  readonly defaultCartItem: CartItem = {
    qty: 0,
    // 补全CartItem类型要求的其他属性默认值
  };
  
  // 接口请求赋值时做空值合并
  this.cartApi.getCartItem().subscribe(res => {
    this.cartItem = res ?? this.defaultCartItem;
  });
  

  处理后模板直接写普通判断即可，不会触发类型报错：

  <app-alert 
    *ngIf="cartItem.qty < 1"
    type="error"
    [dismissible]="false">
    You have to specify a quantity of at least one 
  </app-alert>
  

• 使用非空断言（快速修复，适合小范围改动）
  如果你确定逻辑上访问该属性时值一定存在，可以用Angular模板支持的非空断言运算符!，明确告诉类型检查器跳过该值的空校验：

  <ng-container *ngIf="cartItem?.qty !== null && cartItem?.qty !== undefined">
    <app-alert 
      *ngIf="cartItem!.qty < 1"
      type="error"
      [dismissible]="false">
      You have to specify a quantity of at least one 
    </app-alert>
  </ng-container>
  

  注意：这种写法需要你自行保证逻辑严谨，一旦判断条件漏写，运行时会抛出空指针错误。

• 关闭严格模板检查（不推荐）
  可以在tsconfig.json的angularCompilerOptions配置项中关闭strictTemplates或strictNullChecks，但会丢失全量模板类型检查能力，容易漏过其他真实的类型错误，仅适合遗留项目临时兼容用。

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