如何修复Angular/TypeScript中的‘Object is possibly null’（TS2531）错误？

这个错误是TypeScript严格空值检查模式下的提示——它认为$event.target有可能是null，直接访问.value存在风险。以下是几种实用的解决方式：

方法1：使用非空断言符! #

直接告诉TypeScript你确定$event.target不会为null，适合你能保证select元素一定存在的场景：
修改模板中的事件绑定：

<select class="custom-select mb-3" (change)="onSortSelected($event.target!.value)">
  <option *ngFor="let sort of sortOptions" [value]="sort.value">{{sort.name}}</option>
</select>

组件方法保持不变即可。

方法2：使用可选链操作符?. #

通过可选链避免null访问，当target为null时会返回undefined，需要在组件方法里兼容这种情况：
模板修改：

<select class="custom-select mb-3" (change)="onSortSelected($event.target?.value)">
  <option *ngFor="let sort of sortOptions" [value]="sort.value">{{sort.name}}</option>
</select>

组件方法调整参数类型：

onSortSelected(sort: string | undefined){
  if (!sort) return; // 处理undefined的情况
  this.sortSelected = sort;
  this.getProducts();
}

方法3：在组件方法中显式处理（最严谨） #

把事件对象传到方法里，手动判断并转换类型，这种方式更安全，适合严格模式下的最佳实践：
模板修改：

<select class="custom-select mb-3" (change)="onSortSelected($event)">
  <option *ngFor="let sort of sortOptions" [value]="sort.value">{{sort.name}}</option>
</select>

组件方法调整：

onSortSelected(event: Event){
  const selectElement = event.target as HTMLSelectElement;
  if (selectElement) {
    this.sortSelected = selectElement.value;
    this.getProducts();
  }
}

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