Angular 5中获取Select选项值并传入函数的实现方法

针对你的场景，我给你两种简单可靠的实现方式，你可以根据自己的习惯选择：

方式一：使用模板引用变量（你已定义的#product） #

你已经在<select>标签上添加了#product模板引用变量，直接在按钮点击事件里传递它的value就可以了，完整的按钮代码如下：

<div class="form-group">
  <button (click)="addFeature(product.value)">添加</button>
</div>

然后在你的组件类里定义对应的函数，接收选中的product对象：

addFeature(selectedProduct: Product) {
  // 这里处理选中的产品，比如打印或者传入业务逻辑
  console.log('选中的产品:', selectedProduct);
  // 你的其他业务代码...
}

注意：因为你给<option>绑定的是整个product对象，Angular会默认把对象序列化为字符串，这可能导致传递的值不是预期的对象。如果遇到这个问题，建议你绑定产品的唯一标识（比如product.id），然后在组件里通过id找到对应的产品对象：
修改下拉框的option绑定：

<option *ngFor="let product of products" [value]='product.id'>{{product.name}}</option>

组件里的函数：

addFeature(productId: number) {
  const selectedProduct = this.products.find(p => p.id === productId);
  if (selectedProduct) {
    console.log('选中的产品:', selectedProduct);
    // 后续逻辑...
  }
}

方式二：通过FormControl获取值（更贴合Angular表单规范） #

既然你已经使用了formControlName="product"，可以直接从表单控件里获取选中值，不需要依赖模板引用变量：
按钮代码：

<div class="form-group">
  <button (click)="addFeature()">添加</button>
</div>

组件类里的函数：

addFeature() {
  const selectedProduct = this.angularForm.get('product')?.value;
  if (selectedProduct) {
    console.log('选中的产品:', selectedProduct);
    // 你的业务逻辑...
  }
}

这种方式更符合Angular响应式表单的使用习惯，不需要额外的模板引用，推荐在复杂表单场景下使用。

内容的提问来源于stack exchange，提问作者Lars Suffys