Question

我有一个下拉列表，用于绑定数据库中的数据

<select (ngModelChange)="load($event)">
 <option *ngFor="let type of types" [ngValue]="type">{{type.Name}}</option>
</select>

在另一个按钮上单击（不是下拉列表更改事件）我得到了应该绑定到此选择的type.Id，显示所选名称并保留以供进一步使用。我怎么能这样做。

Answer 1

您应该使用与ngModel的双向绑定

<select [(ngModel)]="selectedElement">
 <option *ngFor="let type of types" [ngValue]="type.id">{{type.Name}}</option>
</select>
{{selectedElement |json}}

点击按钮，使用

访问所选的ID

this.selectedElement.id

更新1：如果您要根据服务响应更改所选值，请使用以下代码

HTML {{type.Name}}

组件

types:any[]=[
                {id:1,Name:'abc'},
                {id:2,Name:'abdfsdgsc'}
    ];
  /*item to be preselected should be in the below object which 
  *is returned by the web  service
  */
  selectedElement:any= 2;

更新了 LIVE DEMO

Answer 2

你可以这样做：

如果匹配您收到的号码，请设置所选项：

<select >
  <option value="select" disabled>--Select--</option>
  <option *ngFor="let type of types" [selected]="type.id == id" [ngValue]="type">{{type.name}}</option>
</select>

当您收到号码时，您将该值设置为id（或您想要的任何变量）。这是

如何将值绑定到另一个事件angular2的下拉列表

2 个答案:

的 Demo