javascript - Angular 2 选择选项(下拉)-如何获取更改值以便在函数中使用它？

Question

我正在尝试构建一个包含一些值的下拉菜单。

但是，在选择一个值时，我想进行一个采用 ID 的 API 调用。

在我的 component.ts 中，我有一个值数组:

values = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

在我的模板中，我按如下方式使用该数组:

<select>
  <option *ngFor="let v of values" [value]="v">  
    {{v.name}}
  </option>
</select>

但是，从下拉列表中选择一个值时，如何访问 id 属性？我想在我的函数 getPhotosByType(id) 中使用它。

谢谢

Answer 1

我的回答有点晚但很简单；但将来可能会帮助某人； 我确实尝试过 Angular 版本，例如 4.4.3、5.1+、6.x、7.x、8.x、9.x、10.x、11.x、12.x、13.x、14.x使用 $event(目前最新)

模板:

<select (change)="onChange($event)">
    <option *ngFor="let v of values" [value]="v.id">{{v.name}}</option>
</select>

TS

export class MyComponent {
  public onChange(event): void {  // event will give you full breif of action
    const newVal = event.target.value;
    console.log(newVal);
  }
}