각도 2 반응 양식, 서비스에서 채워지는 컨트롤 선택

Question

저는 Angular의 반응 형 양식을 사용하려고하는데 서비스로 채워지는 드롭 다운 목록의 기본 바인딩을 지연하는 방법을 알아내는 데 어려움이 있습니다. 여기 내 구성 요소의 코드 조각입니다 :

는

export class TransferComponent { 
id: number; 
accounts: Account[] = []; 
myForm: FormGroup; 
transfer: Transfer; 

constructor(
    private http: Http, 
    private fb: FormBuilder, 
    private route: ActivatedRoute, 
    private transferService: TransferService, 
    private accountService: AccountService, 
    private router: Router) { 
    this.transfer = new Transfer(); 
    this.myForm = fb.group({ 
     'id': [null], 
     'accountFromId': [this.transfer.accountFromId, Validators.required], 
     'accountToId': [this.transfer.accountToId, Validators.required], 
     'title': [this.transfer.title, Validators.required], 
     'amount': [this.transfer.amount, Validators.required], 
     'transferDate': [this.transfer.transferDate, Validators.required] 
    }); 
} 

ngOnInit(): void { 
    this.accountService.getAccountList() 
     .then(accounts => this.accounts = accounts); 
    this.route.queryParams.subscribe(params => { 
     this.id = params['id']; 
     if (this.id) { 
      this.transferService.getTransfer(this.id) 
       .then(transfer => { 
        this.transfer = transfer; 
        this.myForm.setValue(transfer); 
       }); 
     } 
    }); 
} 

생각이 여기 시도하고 'ID'매개 변수를 얻을, 전송 엔티티에 대한 서비스를 호출하고 계정 항목이 미리 채워진 드롭 다운으로 형성에 바인딩하는 것입니다. 'accountFromId'선택 요소가 선택 빈 값 (옵션이 있지만, 제대로 선택되지 않음)로 남아

<select class="form-control" 
       id="accountFromInput" 
       [formControl]="myForm.controls['accountFromId']"> 
      <option *ngFor="let acc of this.accounts" value="{{acc.id}}">{{acc.name}}</option> 
     </select> 

전송 개체가 제대로 대부분의 필드의 결합,하지만 내보기의 일부는 다음과 같습니다. accountFromId가 서비스에서 계정 값을 가져 와서 선택하도록 추가 한 후에 바인딩되도록하려면 구성 요소를 다시 연결해야합니까?

Answer 1

내가 Promise.all()을 찾고 있음이 밝혀졌습니다. 서비스에서 전송 및 계정 [] 엔티티를 모두 기다린 다음 양식에 바인딩해야했습니다. 아래 업데이트되고 작동하는 코드 :

export class TransferComponent { 
id: number; 
accounts: Account[] = []; 
myForm: FormGroup; 
submitted: boolean = false; 
saved: boolean = false; 

constructor(
    private http: Http, 
    private fb: FormBuilder, 
    private route: ActivatedRoute, 
    private transferService: TransferService, 
    private accountService: AccountService, 
    private router: Router) { 
    this.myForm = fb.group({ 
     'id': [null], 
     'accountFromId': [null, Validators.required], 
     'accountToId': [null, Validators.required], 
     'title': [null, Validators.required], 
     'amount': [null, Validators.required], 
     'transferDate': [null, Validators.required] 
    }); 
} 

ngOnInit(): void { 
    var accountPromise:Promise<Account[]> = this.accountService.getAccountList() 
     .then(accounts => this.accounts = accounts); 
    this.route.queryParams.subscribe(params => { 
     this.id = params['id']; 
     if (this.id) { 
      var transferPromise: Promise<Transfer> = this.transferService.getTransfer(this.id); 
      Promise.all([ 
       accountPromise, 
       transferPromise 
      ]).then(value => { 
       this.myForm.setValue(value[1]); 
      }) 
     } 
    }) 
}