在选择中访问选项的值并将其传递给函数 - Angular 5答案

【问题标题】：Access value of option in select and pass it to function - Angular 5在选择中访问选项的值并将其传递给函数 - Angular 5
【发布时间】：2018-04-24 09:36:33
【问题描述】：

我有一个 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>

当我点击按钮和console.logproduct.value 我得到[object,object]，如何解决这个问题？

addFeature(name, description, product) {
    console.log(product);
    // this.featureservice.addFeature(name, description,product);
    // this.router.navigate(['/features/index']);
    // location.reload();
}

更新

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

ngOnInit() {
    this.getProducts();
}

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

【问题讨论】：

试试这个 [value]='product.value'

标签： javascript angular

【解决方案1】：

您正在获取整个对象，如果您需要 name 或 description ，请访问它

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>

你可以访问它，

addFeature() {
  console.log(this.selectedProduct);
}

【讨论】：

你能试试你把console.log(JSON.stringify(product))放在这里的结果吗
{"0":{},"1":{},"__zone_symbol__changefalse":[{"type":"eventTask","state":"scheduled","source":" HTMLSelectElement.addEventListener:change","zone":"angular","runCount":2}],"__zone_symbol__blurfalse":[{"type":"eventTask","state":"scheduled","source":" HTMLSelectElement.addEventListener:blur","zone":"angular","runCount":2}]}
是我在
检查更新的答案
解决问题了吗

【解决方案2】：

绑定到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>

请参阅Differences between value and ngValue in Angular 5 了解更多信息。

【讨论】：

【解决方案3】：

我并没有完全理解您的疑问，但请尝试将您的选择标签更改为如下内容：

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

【讨论】：

【解决方案4】：

我自己找到了解决办法

    <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>

【讨论】：