Javascript 访问选择中选项的值并将其传递给函数-角度5

我有一个angularForm和一个组合框，其中填充了数据库中的选项。我需要获得所选的选项，并在单击按钮时将其传递给函数

<div class="form-group">
    <select class="form-control" formControlName="product" #product>
        <option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
    </select>
</div>

<div class="form-group">
    <button (click)="addFeature(name.value, description.value,product.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>

更新

组合框中的值由以下内容填充：

ngOnInit() {
    this.getProducts();
}

getProducts() {
    this.productservice.getProducts().subscribe(res => {
        this.products = res;
    })
}

---

您正在获取整个对象，如果需要名称或描述，请按以下方式访问它：

addFeature(name, description, product) {
  console.log(product.name);
}

编辑

您可以使用ngModel并直接访问变量

<select class="form-control" [(ngModel)]="selectedProduct" formControlName="product" #product>
        <option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
</select>

---

我并不完全理解您的怀疑，但请尝试将您的select标记更改为类似以下内容：

<select class="form-control" formControlName="product" #product>
   <option *ngFor="let product of products" [value]='product.value'
       {{product.name}}
   </option>
</select>

绑定到选项标记的
ngValue
而不是
value
：

<div class="form-group">
  <select class="form-control" formControlName="product" #product>
    <option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
  </select>
</div>


{{product.name}

有关更多信息，请参阅。
我自己找到了解决方案

    <select class="form-control" [(ngModel)]='selectedOption' formControlName="product" #product>
        <option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
      </select>

    <button (click)="addFeature(name.value, description.value,selectedOption.name)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>


{{product.name}
添加
你能试试当你把console.log（JSON.stringify（product））放在这里时得到的结果吗？{“0”：{}，“1”：{}，{uu zone_symbol_uchangeflse:[{“type”：“eventTask”，“state”：“scheduled”，“source”：“HTMLSelectElement.addEventListener:change”，“zone”：“angular”，“runCount”：2}]，“uu zone_usymbol_u-fulse”：[{“type”：“eventTask”，“state”：“scheduled”，“source”：“source”：”：”：“HTMLSelectElement.addEventListener:blur”、“zone”：“angular”、“runCount”：2}]}是我在检查数据时得到的答案它是否解决了问题此[value]=“product.value”
<div class="form-group">
  <select class="form-control" formControlName="product" #product>
    <option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
  </select>
</div>

    <select class="form-control" [(ngModel)]='selectedOption' formControlName="product" #product>
        <option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
      </select>

    <button (click)="addFeature(name.value, description.value,selectedOption.name)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>