[英]How to access element(object) from *ngFor into my (click) event?
I need access to 'doctor'(which is an objct) from modalContent(Array of object coming from API) using *ngFor which is on 'option' tag. 我需要使用在'option'标记上的* ngFor从modalContent(API的对象数组)访问'doctor'(这是一个objct)。 I'm trying to figure out a way to pass this 'doctor' to my 'addDoctor()' function.
我试图找出一种方法来将此“医生”传递给我的“ addDoctor()”函数。 How to do this??
这个怎么做?? Below is the code
下面是代码
<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>
Use [(ngModel)] to get selected value 使用[(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>
You can use a [(ngModel)]
for the select
element and use that in the code as below 您可以将
[(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>
You should be declaring the variable selectedDoctor
and use inside the method as 您应该声明变量
selectedDoctor
并在方法内部使用
addDoctor(){
/// this.selectedDoctor //-- can be accessed here
}
You can so it like 你可以这样喜欢
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.