如何从 *ngFor 访问元素（对象）到我的（点击）事件中？答案

【问题标题】：How to access element(object) from *ngFor into my (click) event?如何从 *ngFor 访问元素（对象）到我的（点击）事件中？
【发布时间】：2018-01-30 05:58:47
【问题描述】：

我需要使用 '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>

【问题讨论】：

标签： angular angular4-forms

【解决方案1】：

你可以这么喜欢

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

WORKING DEMO

【讨论】：

【解决方案2】：

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

<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 并在方法中使用 as

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

LIVE DEMO

【讨论】：

@AkshayP 很乐意为您提供帮助！

【解决方案3】：

使用[(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>

Demo

【讨论】：