angular - 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>

Transfer エンティティはほとんどのフィールドで正しくバインドされますが、'accountFromId' 選択要素は空の値が選択されたままになります (オプションはありますが、適切に選択されていません)。サービスからアカウント値を取得し、それらを追加して選択した後、accountFromId が確実にバインドされるようにコンポーネントを再配線するにはどうすればよいですか?