如何将* ngFor中的element（object）访问到我的click事件中？

Question

我需要使用在'option'标记上的* ngFor从modalContent（API的对象数组）访问'doctor'（这是一个objct）。 我试图找出一种方法来将此“医生”传递给我的“ addDoctor（）”函数。 这个怎么做？？ 下面是代码

  <div class="modal-body">
    <label for="doctor" class="lab control-label">Select Doctor</label>
    <select id="doctor" class="form-control inputlabelcommon">
      <option *ngFor="let doctor of modalContent">{{ doctor.firstName }} {{ doctor.lastName }}</option>
    </select>
  </div>
  <div class="modal-footer footer-class">
    <button class="btn btn-primary btn-class confirm-btn" (click)="addDoctor(doctor)">CONFIRM </button>
  </div>

Answer 1

使用[（ngModel）]获取所选值

<div class="modal-body">
    <label for="doctor" class="lab control-label">Select Doctor</label>
    <select id="doctor" [(ngModel)]="doctor"  class="form-control inputlabelcommon">
      <option *ngFor="let doctor of modalContent" [ngValue]="doctor">
        {{ doctor.firstName }} {{ doctor.lastName }}
      </option>
    </select>
  </div>
  <div class="modal-footer footer-class">
    <button class="btn btn-primary btn-class confirm-btn" (click)="addDoctor(doctor)">CONFIRM </button>
  </div>

演示版

Answer 2

您可以将[(ngModel)]用于select元素，并在下面的代码中使用它

<div class="modal-body">
    <label for="doctor" class="lab control-label">Select Doctor</label>
    <select id="doctor" class="form-control inputlabelcommon" [(ngModel)]="selectedDoctor">
      <option [value]="doctor" *ngFor="let doctor of modalContent">{{ doctor.firstName }} {{ doctor.lastName }}</option>
    </select>
</div>
<div class="modal-footer footer-class">
    <button class="btn btn-primary btn-class confirm-btn" (click)="addDoctor()">CONFIRM </button>
</div>

您应该声明变量selectedDoctor并在方法内部使用

addDoctor(){
   /// this.selectedDoctor          //-- can be accessed here
}

现场演示

Answer 3

你可以这样喜欢

<div class="modal-body">
    <label for="doctor" class="lab control-label">Select Doctor</label>
    <select id="doctor" class="form-control inputlabelcommon" #selectedDr='ngModel' ngModel name='dr'>
      <option *ngFor="let doctor of doctors;" [value]="doctor.id">{{ doctor.firstName }} {{ doctor.lastName }}</option>
    </select>
</div>

{{ selectedDr.value }}

<div class="modal-footer footer-class">
    <button class="btn btn-primary btn-class confirm-btn" (click)="addDoctor(selectedDr.value)">CONFIRM </button>
</div>

工作演示