时间戳

首页 > 解决方案 > Angular Object - 将选定的值传递给另一个变量

angular - Angular Object - 将选定的值传递给另一个变量

问题描述

我正在尝试将 number 类型的变量设置为对象的选定值，但不明白如何设置它。

我想得到所选猫的年龄。我希望selectAge它是一个整数，但它显示为 NaN

HTML：

<select [(ngModel)]="selectedOption">
  <option [ngValue]="undefined" disabled>Select An Option</option>
  <option *ngFor="let o of options" [ngValue]="o.age">Name: {{o.name}}</option>
</select>

零件：

selectedOption: any; 
  options = [
    { name: "Neeko", age: 4},
    { name: "Gato", age: 6},
    { name: "Gatto", age: 12}
  ]

  // This is the problem. How do I correct it?
  // selectAge: number = +this.selectedOption; //NaN

标签： angular

解决方案

例如，您的 selectedOption 变量为 Null，因此您收到此错误。您可以使用 ngModelChange 事件来绑定它。

在你的 html 文件中

<select (ngModelChange) = "dataChanged($event)" [(ngModel)]="selectedOption">
  <option [ngValue]="undefined" disabled>Select An Option</option>
  <option *ngFor="let o of options" [ngValue]="o.age">Name: {{o.name}}</option>
</select>

ts文件

selectAge: number = 0;
dataChanged($event){
    this.selectAge = +this.selectedOption
}

推荐阅读