Angular 2 Reactive Forms，选择控件从服务中填充

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”参数，传输实体呼叫服务，绑定形成与会计分录预充式下拉菜单。我的部分观点如下：

<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”选择元素留下选定的空值（选项是有的，但选择不正确）。我应该如何重新连线我的组件以确保在从服务获取帐户值并将其添加到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]); 
      }) 
     } 
    }) 
}