Angular开发遇到Object is possibly 'null'报错该如何解决？

云上老周

2026-9-29

问题原因

这个Object is possibly 'null'报错触发的原因是开启strictNullChecks后，TypeScript无法确定$event.target一定存在，判定它有概率为null，直接访问.value就会触发类型报错。直接关闭strictNullChecks是不推荐的做法，会丢失TypeScript大部分类型安全校验能力，也容易引发其他隐性报错。

可行解决方案

方案1：模板内用可选链+空值兜底
把component.html里的模板代码修改为：
```
<input [value]="email" (keyup.enter)="email = $event.target?.value ?? email; onKeyUp()"/>
```
这里?.可选链会在$event.target为null时直接返回undefined，配合??空值合并运算符，兜底使用原来的email值，避免出现null赋值给string类型变量的问题。
方案2：把事件逻辑移到TS文件处理（更推荐）
模板只做事件绑定，把取值逻辑放到TS中做类型收窄，代码可维护性更高：
1. 修改component.html代码：
```
<input [value]="email" (keyup.enter)="onKeyUp($event)"/>
```
1. 修改component.ts代码：
```
email: string = "me@example.com"

onKeyUp(event: KeyboardEvent){
  const target = event.target as HTMLInputElement
  this.email = target.value
  console.log(this.email)
}
```
这里直接把event.target断言为HTMLInputElement类型，明确告知TypeScript目标元素的类型，从根源上消除空值报错的同时保留类型校验能力。
方案3：临时局部关闭空值校验（极不推荐，仅临时调试用）
如果需要临时绕过校验，可以在取值前加!非空断言：
```
<input [value]="email" (keyup.enter)="email = $event.target!.value; onKeyUp()"/>
```
该写法会直接告诉TypeScript$event.target一定不为null，跳过空值校验，但如果运行时真的出现null值会直接报错。