反応角度：編集フォームの選択コントロールを移植するが、私は角に新しいです

Question

失敗し、私は部門で選択移入しようとすると、角度4つの反応性のフォームを使用して編集フォームを持っている、ルールは病院がユーザーから移入されています。病院、病院に基づいて階段状のドロップダウン部門 病院が正しく表示されている間、部門は失敗します。 コンソールに、人口部が正しくdepartmentIdを表示しています。

編集コンポーネント：

form = new FormGroup({ 
     hospital: new FormControl({ value: 'hospitalId', disabled: true }, Validators.required), 
     department: new FormControl('', Validators.required) 
); 
    damaId: number; 
    me: any; 

    hospitals: any[]; 
    selectedHospital: any; 
    departments: any[]; 
    availableDepartments: any[]; 
    selectedDepartment: any; 
    user: string = ''; 



    constructor(private route: ActivatedRoute, 
     private router: Router, 
     private commonService: CommonService, 
     private damaService: DamaService, 
     private accountEndpoint: AccountEndpoint, 
     private toastyService: ToastyService) { 

     this.sub = this.route.params.subscribe(
      params => { 
       let id = +params['id']; 
       this.getDama(id); 
      } 
     ); 

     this.accountEndpoint.getUserEndpoint() 
      .subscribe(response => { 
       const me = response.json(); 
       this.dama.userId = me.id; 
      }); 
    } 

    ngOnInit() { 
     const sources = [ 
      this.accountEndpoint.getUserEndpoint(), 
      this.commonService.getHospitals(), 
      this.commonService.getDepartments(), 
      this.commonService.getApproves(), 
     ]; 
     this.sub = this.route.params.subscribe(
      params => { 
       let id = +params['id']; 
       this.getDama(id); 
      } 
     ); 
     Observable.forkJoin(sources).subscribe(
      data => { 
       const me = data[0].json(); 
       this.me = me; 
       this.dama.userId = me.id; 

       this.hospitals = data[1]; 
       this.departments = data[2]; 
       this.approves = data[3]; 

       this.initializeSelectedHospital(); 
       this.filterDepartments(); 
      }, 
      err => { 
       if (err.status == 404) 
        this.router.navigate(['/damas']); 
      }); 
    } 

    ngOnDestroy(): void { 
     this.sub.unsubscribe(); 
    } 

    getDama(id: number): void { 
     this.damaService.getDama(id) 
      .subscribe(
      (dama: SaveDama) => this.onDamaRetrieved(dama), 
      (error: any) => { 
       if (error.status == 404) 
        this.router.navigate(['/damas']) 
      }); 
    } 

    onDamaRetrieved(dama: SaveDama): void { 

     //Update the data on the form 
     this.form.patchValue({ 
      hospital: this.dama.hospitalId, 
      department: this.dama.departmentId, 

     }) 
    } 
    private initializeSelectedHospital() { 
     this.selectedHospital = this.hospitals.find(h => h.id === this.me.hospitalId); 
    } 

    private filterDepartments() { 
     this.availableDepartments = this.selectedHospital.departments; 
    } 


    public submit() { 
     console.log(this.form); 
     if (this.form.dirty) { 
      //copy the form values over the dama object values 
      let p = Object.assign({}, this.dama, this.form.value); 
      this.damaService.update(p) 
       .subscribe(x => { 
        x.toastyService.success({ 
         title: 'Success', 
         msg: 'Form was sucessfully Updated.', 
         theme: 'bootstrap', 
         showClose: true, 
         timeout: 5000 

HTMLページ：

   <form [formGroup]="form" (ngSubmit)="submit()"> 
       <div class="form-group"> 
        <label for="hospital" hospital=""></label> 
        <select id="hospital" class="form-control" formControlName="hospital" [(ngModel)]="selectedHospital"> 
         <option value="undefined">Select a hospital</option> 
         <option *ngFor="let h of hospitals" [ngValue]="h">{{ h.name }}</option> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="department">Department:</label> 
        <select id="department" class="form-control" formControlName="department" [disabled]="!availableDepartments" [(ngModel)]="selectedDepartment"> 
         <option value="undefined" disabled> 
          Select a department 
          <span *ngIf="selectedHospital">from "{{selectedHospital?.name}}"</span> 
         </option> 
         <option *ngFor="let d of availableDepartments" [ngValue]="d">{{d.name}}</option> 
        </select> 
        <div *ngIf="form.get('department').touched && form.get('department').invalid" class="alert alert-danger">Department is required....</div> 
       </div> 

SaveDamaモデル

export class SaveDama { 
    id: number; 
    departmentId: number; 
    hospitalId: number; 
    damaNumb: number; 
    totalDisch: number; 
    damaDt: string; 
    dataEntryTime: string; 
    latestUpdate: string; 
    on: string; 
    approvedOn: string; 
    approveId: number; 
    notes: string; 
    userId: string; 

} 

私はあなたが助けに感謝.....