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

谢谢

原文由 user1354934 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

模板/HTML 文件 (component.ts)

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

打字稿文件（component.ts）

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

onChange(cityEvent){
    console.log(cityEvent); // It will display the select city data
}

(ngModelChange) 是 ngModel 指令的 @Output。它在模型更改时触发。如果没有 ngModel 指令，您将无法使用此事件

原文由 VIKAS KOHLI 发布，翻译遵循 CC BY-SA 4.0 许可协议