3

私は 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: ['']
    });
}

私が抱えている問題は、フォームが配列の最初のオブジェクトのみを表示し、ループしていないことです

4

0 に答える 0