javascript - Angular 2 - 如何在 init 上预填充 3 个表单组

Question

我有以下代码，允许用户添加一组新字段。但我希望组件在 init 时渲染出 3 组数据。

目前，一组字段是通过 initRateRow 函数创建的，但如何让它循环通过 httpservice 将其插入“this._fb.group”？

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-exchange-rates',
  templateUrl: './exchange-rates.component.html',
  styleUrls: ['./exchange-rates.component.scss']
})
export class ExchangeRatesComponent implements OnInit {

    public myForm: FormGroup;

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.myForm = this._fb.group({
            rates: this._fb.array([
                this.initRateRow(),
            ])
        });
    }

    initRateRow() {
        return this._fb.group({
            rateUnit: ['24', Validators.required],
            currencyFrom: ['GBP', Validators.required],
            currencyTo: ['USD', Validators.required]
        });
    }

    blankRateRow() {
        return this._fb.group({
            rateUnit: ['', Validators.required],
            currencyFrom: ['', Validators.required],
            currencyTo: ['', Validators.required]
        });
    }

    addRateRow() {
        const control = <FormArray>this.myForm.controls['rates'];
        control.push(this.blankRateRow());
    }

    removeRateRow(i: number) {
        const control = <FormArray>this.myForm.controls['rates'];
        control.removeAt(i);
    }

    save(model) {
        // call API to save
        // ...
        console.log(model);
    }

}

Answer 1

您可以在ngOnInit()中完成。

ngOnInit(){
    let url = '/getData'; // API url
    this.http.get(url)
        // Assuming data arrive as json
        .map(r => r.json())
        // Assuming data arrive as array of row
        .subscribe(rowArray => rowArray.forEach(row => {

            // Use `row` to init 1 row

        }));
}