我有一个模型驱动窗体,在其中我想添加一个包含多个选项的下拉列表。选项来自预取列表,表单的模型被注入到组件中。表单被正确加载:模型中的所有字段都被正确填充,abd下拉列表的选项列表也被正确加载。
唯一的问题是我无法设置列表的selected
值,并且它首先显示为空值。在Angular 2模型驱动表格中下拉列表
在这里,我加载HMOs列表,然后加载病人,然后才创建表单。
表单中的所有值(名称,ID等在此省略)均正确加载到表单中。
正确填写表格中的下拉列表:所有HMO正在填充列表。
但是,列表中的选定值缺失,并且丢失的数据没有初始值。
为了进行调试,我已将option
标记中的布尔条件替换为函数调用isSelected(hmo)
:patient.hmo.uid == hmo.uid
。
这个函数实质上做了相同的比较并返回它的值,但是首先记录它。事实上,我发现具有正确hmo的选项获得的值为true
,其他选项的值为false
,这意味着所有数据均正确加载。
此外,当我设置[selected]="true"
(总是为真),我确实看到更改会影响:最后一个选项被选中(默认为HTML)。
那么我错在哪里?我应该如何正确设置选定的选项?
代码成分(除HMO所有字段都被忽略):
import {Component, Input, Inject, OnInit} from "@angular/core";
import {
FormGroup,
FormControl,
REACTIVE_FORM_DIRECTIVES,
Validators,
FormBuilder,
FormArray
} from "@angular/forms";
import {Patient} from "./patient";
import {PatientsService} from "./patients.service";
import {Hmo} from "../hmos/hmo";
import {HmosService} from "../hmos/hmos.service";
import {Doctor} from "../doctors/doctor";
import {DoctorsService} from "../doctors/doctors.service";
import {Router, ActivatedRoute} from "@angular/router";
import {Subscription} from "rxjs/Rx";
import {Response} from "@angular/http";
import {JavaDate} from "./java-date";
@Component({
moduleId: module.id,
selector: 'gy-patient-edit',
templateUrl: 'patient-edit.component.html',
directives: [REACTIVE_FORM_DIRECTIVES],
})
export class PatientEditComponent implements OnInit {
patientForm: FormGroup;
@Input() patient: Patient;
private hmos: Hmo[];
private patientUid: number;
private showForm: boolean = false;
constructor(@Inject(PatientsService) private patientsService: PatientsService,
@Inject(HmosService) private hmosService: HmosService,
@Inject(ActivatedRoute) private route: ActivatedRoute,
@Inject(FormBuilder) private formBuilder: FormBuilder) {
}
ngOnInit(): any {
this.subscription = this.route.params.subscribe(
(params: any) => {
this.patientUid = params['id']; //Getting the UID from the URL
}
);
this.hmosService.hmosChanged.subscribe(
(hmos: Hmo[]) => {
this.hmos = hmos; //Fetching available HMOs
}
);
this.hmosService.fetchHmos();
this.patientsService.fetchPatient(this.patientUid) //Fetching the Patient
.map((response: Response) => response.json())
.subscribe((data: Patient) => {
this.patient = data;
this.restartForm(); //Only required so the form will ne initialized only after the patient is received from the server
});
}
restartForm(){
this.patientForm = this.formBuilder.group({
hmo: [this.patient.hmo]]
});
this.showForm = true;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
代码的HTML形式:
<div class="row" *ngIf="showForm">
<div class="col-xs-12" *ngIf="showForm">
<form [formGroup]="patientForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="hmo">HMO</label>
<select formControlName="hmo" id="hmo">
<option *ngFor="let hmo of hmos"
[value]="hmo.uid" [selected]="patient.hmo.uid == hmo.uid">
{{hmo.name}}
</option>
</select>
</form>
</div>
</div>
代码Patient
:
import {Hmo} from "../hmos/hmo";
export class Patient {
constructor(public hmo: Hmo) {
}
}
代码对于Hmo
:
export class Hmo{
constructor(public uid: number, public name: string){}
}
谢谢。事实上,这工作。 –