Question

我正在使用Angular2反应式表单（这是一个简历表单），表单上有一些字段，然后是一个组件qualifications，我需要传递一个数组（以便使用循环我可以显示用户的资格）。

这就是我将数据传递给组件qualifications

的方式

        <ion-list-header> Qualification & Education </ion-list-header>
        <div formArrayName="qualifications">
            <div *ngFor="let qualification of profileForm.controls.qualifications.controls; let i=index"
                 class="panel panel-default">
                <qualifications [group]="profileForm.controls.qualifications.controls[i]"></qualifications>
            </div>
        </div>

这是qualifications组件的html

<div [formGroup]="qualificationForm">
    <ion-item padding>
        <ion-label stacked>Qualification</ion-label>
        <ion-input type="text" formControlName="position"></ion-input>
        <small [hidden]="qualificationForm.controls.position.valid" class="text-danger">
            Qualification is required
        </small>
    </ion-item>
    <ion-item padding>
        <ion-label stacked>Institution</ion-label>
        <ion-input type="text" formControlName="location"></ion-input>
    </ion-item>
    <ion-item padding>
        <ion-label stacked>Date</ion-label>
        <ion-input type="date" formControlName="at_date"></ion-input>
    </ion-item>
</div>

这是资格数组的样子

0:{id: 1744687, location: "Singapore", position: "B Tech", at_date: "09/2014"}
1:{id: 1762435, location: "Singapore", position: "B Tech 2", at_date: "11/2014"}
2:{id: 1802837, location: "Singapore", position: "B Tech 3", at_date: "12/2016"}

我无法理解如何将对象数组传递给此组件，以便它可以在循环中显示资格

在ngOnInit我正在调用addQualification函数，如下所示

addQualification() {
    const control = <FormArray>this.profileForm.controls['qualifications'];
    const addrCtrl = this.initAddress();
    control.push(addrCtrl);
}

initAddress() {
    return this.formBuilder.group({
        position: ['', Validators.required],
        location: [''],
        at_date: ['']
    });
}

我遇到的问题是表单只显示数组的第一个对象，而不是循环遍历

Angular2如何将数组传递给作为反应形式一部分的组件

0 个答案: