如何从Angular 6中的选定下拉列表将ID传递给我的API请求？

问题描述

我在这里使用Angular 6，我有一个来自API响应的下拉列表。

<select 
  class="form-control" 
  name="empName" 
  [(ngModel)]="allData.secondEmp" 
  (change)="typeChange()" 
  (blur)="getid($event)" 
  required
>                           
  <option 
    *ngFor="let employee of Employees" 
    value="{{employee.secondEmp}}">{{employee.firstName}}</option>
</select>

这里我有一个像这样的数组

employees = [{id: 1,firstemp: 'kaushik',secondEmp: 'krishna'}....]

在这里，我想在更改下拉功能时在请求中获取ID。

我知道我们需要更改value="{{employee.id}}"，但是我在这里遇到其他一些*ngIf条件，所以我不能在这里更改value。还有其他解决方案吗？ TIA

解决方法

[ngValue] = "{secondEmployee: employee.secondEmp,id: employee.id }"

尝试

,

在您的模板文件中：使用数据属性

 <select 
  class="form-control" 
  name="empName" 
  [(ngModel)]="allData.secondEmp" 
  (change)="typeChange()" 
  (blur)="getid($event)" 
  required>                           
  <option 
    *ngFor="let employee of Employees" 
    value="{{employee.secondEmp}}"
    [attr.data-empid] = "employee.id">{{employee.firstName}}</option>
</select>

在TS文件中：获取您的ID

getid(e) {
    const targetIndex = e.target;
    const res = targetIndex.options[targetIndex.selectedIndex].dataset.empid;
    console.log(res);
  }