正如标题所述,我有一个反应式表单,其中包含多个<mat-select>
。在初始加载表单时,即使form.value
显示了它,初始选项也没有显示。
相关组件.ts:
export class DesJobInfoEditComponent implements OnInit {
...
currentJobData: IJob;
jobTypes: IJobType[];
...
constructor(private fb: FormBuilder) {
...
// Construct forms
this.createForm();
this.initializeForm();
}
createForm() {
this.editJobInfoForm = this.fb.group({
...
JobType: '', // mat-select
...
});
}
initializeForm() {
this.rebuildForm();
}
rebuildForm() {
this.editJobInfoForm.reset({
...
JobType: this.jobTypes[this.currentJobData.JobType].DisplayDesc,
...
});
}
<mat-form-field fxFlex>
<mat-label>Job Type</mat-label>
<mat-select formControlName="JobType" placeholder="Job Type">
<mat-option *ngFor="let jobType of jobTypes" value="jobType.value">
{{ jobType.DisplayDesc }}
</mat-option>
</mat-select>
</mat-form-field>
当表单加载时,选择框不会显示最初选定的选项,但是它们已经被正确地设置了。Form value { ... "JobType": "0 - Standard", ... }
表单上显示的只是占位符。
这似乎不应该这么困难。
我做错了什么?
编辑:
this.jobTypes
在模块加载时被加载,它是一个 BehaviorSubject,存在于我的数据服务中。 我在此组件的构造函数中进行订阅:
this.data.jobTypes.subscribe(jobTypes => { this.jobTypes = jobTypes });
let jobType of jobTypes | async
- Tin- Victor Carvalho