在Angular 2模型驅動表格中下拉列表

Question

我有一個模型驅動窗體，在其中我想添加一個包含多個選項的下拉列表。選項來自預取列表，表單的模型被注入到組件中。表單被正確加載：模型中的所有字段都被正確填充，abd下拉列表的選項列表也被正確加載。
唯一的問題是我無法設置列表的selected值，並且它首先顯示爲空值。

在這裏，我加載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){} 
} 

Answer 1

通過比較<option>的值與<select>的值來計算所選選項。鑑於此，要將<option>標記爲選中狀態，我們需要確保包裝<select>包含相同的值，這反過來又要求模型中相應表單控件的正確值。

您的代碼稍加修改如下：

restartForm(){ 
    this.patientForm = this.formBuilder.group({ 
     hmo: [this.patient.hmo.uid] 
    }); 
    this.showForm = true; 
    } 

而且模板：

<select formControlName="hmo" id="hmo"> 
    <option *ngFor="let hmo of hmos" 
    [value]="hmo.uid"> 
     {{hmo.name}} 
    </option> 
</select>