Angular中传递$event.target.value时出现错误，求技术解决方案

错误原因 #

• 方法参数不匹配：onSelectCateg()方法未定义参数，但HTML调用时传递了$event.target.value，导致参数数量不匹配报错。
• 类型与逻辑双重错误：onSelectScateg(id: number)期望接收数字类型的ID，但HTML传递的是字符串类型的item.title；同时getonesubcategory(id)是根据子分类ID查询接口，当前option绑定的是标题而非ID，完全不符合接口逻辑。
• value绑定不规范：option的value使用插值表达式{{item.title}}，Angular中推荐使用属性绑定[value]，避免字符串解析异常。

解决办法 #

1. 修正方法定义与HTML调用逻辑 #

addproduct.component.ts

// 修改onSelectCateg，接收分类ID参数（如果需要按分类筛选子分类）
onSelectCateg(categId: number) {
  // 替换为实际根据分类ID获取子分类的服务方法
  this.subcategoryservice.getSubcategoriesByCategId(categId).subscribe(
    response => { this.listsubcategory = response; }
  );
}

// 保留onSelectScateg，确保参数类型匹配接口要求
onSelectScateg(id: number) {
  this.subcategoryservice.getonesubcategory(id).subscribe(
    response => {
      this.subcategory = response;
      this.title = (10000 + this.subcategory.rang).toString().substring(1);
      this.title = this.subcategory.id_categ + this.subcategory.title + this.title;
      this.f['title'].setValue(this.title);
    }
  );
}

addproduct.component.html

<!-- 第一个select：绑定分类ID到value，传递数字类型参数 -->
<select class="form-control" formControlName="title_categ" id="title_categ" (change)="onSelectCateg(+$event.target.value)">
  <option value="0">-Select-</option>
  <option *ngFor="let item of listcategory" [value]="item.id">{{item.title}}</option>
</select>

<label>title SCatégorie </label>
<!-- 第二个select：绑定子分类ID到value，传递数字类型参数 -->
<select class="form-control" formControlName="title_scateg" id="title_scateg" (change)="onSelectScateg(+$event.target.value)">
  <option value="0">-Select-</option>
  <option *ngFor="let item of listsubcategory" [value]="item.id">{{item.title}}</option>
</select>

2. 关键细节说明 #

• 使用+$event.target.value将字符串类型的value转为数字，匹配方法的number参数要求。
• 将option的value="{{item.title}}"改为[value]="item.id"，确保传递后端接口需要的分类/子分类ID，而非标题。
• 若onSelectCateg原本不需要参数（仅需获取所有子分类），直接去掉HTML中的传参，改为(change)="onSelectCateg()"即可。

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