Angular中event.target.value的替代方案及下拉筛选实现疑问

问题背景 #

尝试仿照搜索栏实现下拉菜单筛选国家区域时，使用$event.target.value遇到TypeScript错误：

Object is possibly 'null'.ngtsc(2531)
Property 'value' does not exist on type 'EventTarget'.ngtsc(2339)

你的实现思路没问题，以下是几种可行的修复方案：

方案1：类型断言 #

在模板中对事件目标做类型断言，明确其为HTMLSelectElement：

<div class="drop-down">
  <select (change)="updateDisplayRegions(($event.target as HTMLSelectElement).value)">
    <option *ngFor="let region of regionOptions" value="{{region}}">{{region}}</option>
  </select>
</div>

方案2：模板引用变量（更符合Angular风格） #

给<select>添加模板引用变量，直接获取选中值：

<div class="drop-down">
  <select #regionSelect (change)="updateDisplayRegions(regionSelect.value)">
    <option *ngFor="let region of regionOptions" [value]="region">{{region}}</option>
  </select>
</div>

这里将value="{{region}}"替换为[value]="region"，是Angular标准的属性绑定语法，比插值表达式更严谨。

方案3：响应式表单（推荐） #

既然已经使用了响应式表单的FormControl，可以将下拉菜单与表单控件绑定，和搜索栏逻辑统一，代码更简洁：

1. 在组件类中添加区域控制控件：

regionControl = new FormControl('');

2. 在ngOnInit中订阅值变化：

this.regionControl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((region) => {
  if (region) {
    this.updateDisplayRegions(region);
  } else {
    // 清空筛选，显示所有国家
    this.displayCountries = [...this.countries];
  }
});

3. 模板中绑定表单控件：

<div class="drop-down">
  <select [formControl]="regionControl">
    <option value="">所有区域</option>
    <option *ngFor="let region of regionOptions" [value]="region">{{region}}</option>
  </select>
</div>

这种方式无需手动处理change事件，通过响应式表单数据流处理筛选，与搜索栏逻辑保持一致，符合Angular最佳实践。

额外优化建议 #

可以将搜索和区域筛选逻辑合并为一个方法，支持组合筛选：

private updateDisplayCountries(): void {
  const searchTerm = this.countryControl.value?.toLowerCase() || '';
  const selectedRegion = this.regionControl.value?.toLowerCase() || '';
  
  this.displayCountries = this.countries.filter(country => {
    const matchesSearch = country.name.common.toLowerCase().includes(searchTerm) || country.name.official.toLowerCase().includes(searchTerm);
    const matchesRegion = !selectedRegion || country.region.toLowerCase().includes(selectedRegion);
    return matchesSearch && matchesRegion;
  });
}

之后只需在两个控件的valueChanges中调用该方法即可，无需分开处理单一筛选逻辑。

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