Question

我是Angular 2的新手，我遇到了这个问题。我有一个选择有3个选项，我无法获得其中一个选项的值。

html：

<select [(ngModel)]="product_type" class="form-control" (ngModelChange)="getType()">           
        <option [ngValue]="A"><span>ALL</span></option> 
        <option [ngValue]="T"><span>Type product</span></option>
        <option [ngValue]="E"><span>Standart product</span></option>            
    </select>

Component.ts：

 type_product:string;
/*...*/
 getType(){
   this.type_product= ""+this.type_product;
  console.log(this.type_product);

}

当我执行它时，日志显示未定义。我做错了什么？谢谢

Answer 1

使用[]意味着您正在尝试绑定一个您没有的变量，除此之外，它不应该是[ngValue]，它用于绑定非字符串值，不应该是[value]，而是value。

此外，双向绑定[(ngModel)]="product_type"实际上基本上等于以下内容：

[ngModel]="product_type" (ngModelChange)="onChange($event)"

所以选择任一版本。

以下是您的代码的外观：

<select [ngModel]="product_type" class="form-control" (ngModelChange)="getType($event)">           
  <option value="A"><span>ALL</span></option> 
  <option value="T"><span>Type product</span></option>
  <option value="E"><span>Standard product</span></option>            
</select>

和ts：

getType(event){
  this.product_type= ""+event;
  console.log(this.product_type);
}

<强> DEMO

PS，是的，正如其他人所指出的，您的命名约定不匹配：

product_type vs type_product

Answer 2

在日志功能中应该是value而不是[ngValue]和this.product_type。

<强> Demo plunkr

<select [(ngModel)]="product_type" class="form-control">
    <option value="A">ALL</option>
    <option value="T">Type product</option>
    <option value="E">Standard product</option>
</select>

<p>Selected value: {{product_type}}</p>

Answer 3

您的命名方式不同：

声明：

[(ngModel)]="product_type"

引用：

this.type_product

修复：更改一个或另一个并获得一致性：）

Answer 4

如果您不需要双向数据绑定：

    <select (change)="onChange($event.target.value)">
        <option *ngFor="let i of devices">{{i}}</option>
    </select>

onChange(deviceValue) {
    console.log(deviceValue);
}

对于双向数据绑定，请分隔事件和属性绑定：

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option 
[value]="i" *ngFor="let i of devices">{{i}}</option>
    </select>
    export class AppComponent {
      devices = 'one two three'.split(' ');
      selectedDevice = 'two';
      onChange(newValue) {
        console.log(newValue);
        this.selectedDevice = newValue;
        // ... do other stuff here ...
    }

Angular 2 - 尝试从select中获取值时未定义

4 个答案: