如何從 Angular 6 中的選定下拉列表將 Id 傳遞給我的 API 請求？

Question

我在這里使用 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

Answer 1

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

嘗試這個

Answer 2

在您的模板文件中：使用數據屬性

 <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);
  }