首页 文章

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

提问于
浏览
0

我正在尝试使用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”选择元素选择为空值(选项在那里,但没有正确选择) . 我应该如何重新连接我的组件以确保在从服务获取帐户值并将其添加到选择后绑定accountFromId?

1 回答

  • 0

    事实证明我正在寻找Promise.all() . 我不得不等待服务中的transfer和account []实体,然后绑定到表单 . 更新和工作代码如下:

    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]);
                })
            }
        })
    }
    

相关问题