显示角度形式数组的项目

Question

我需要显示用户的姓名和课程列表。不同的用户有不同数量的课程，因此，我正在尝试角度形式数组。 这是我的 .ts:

this.form = this.fb.group({
  name: [''],
  courses: this.fb.array([
    this.fb.group({          
      name: [''],     
    })
  ]),
});

get courses() {
  return this.form.controls["courses"] as FormArray;
}

和我的.html：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div class="mb-3">
     <label>Name</label>
     <input type="text" formControlName="name"/>                    
   </div>
   <div class="mb-3">
     <label>Courses</label>                    
     <div formArrayName="courses">
       <div *ngFor="let course of courses.controls; let i = index">
         <div [formGroupName]="i">
            <input type="text" formControlName="name"/>
         </div>                                                                                                       
       </div>
     </div>
   </div>      
</form>

问题是用户有两门课程，但只显示其中一门课程！有谁知道是什么问题吗？

P.s.新年快乐:)

Answer 1

您必须确保每个

course

实例都需要

FormGroup

数组中的

courses

实例。

for (let course of this.data.courses) {
  let courseFormGroup = this.newCourseFromGroup();
  courseFormGroup.patchValue(course);

  this.courses.push(courseFormGroup);
}

为避免创建

Course

FormGroup 时出现代码重复，建议创建如下函数：

newCourseFromGroup() {
  return this.fb.group({
    name: [''],
  });
}

另外，担心您当前的代码会将

FormGroup

实例添加到

courses

FormArray

中。如果您将

FormGroup

作为我建议的代码推送，这将导致添加额外的

FormGroup

实例。

因此，如果

data

不存在，则只需通过为

FormArray

FormGroup

添加默认

courses

来初始化 FormArray，如下所示：

this.form = this.fb.group({
  name: [''],
  courses: this.fb.array([]),
});

if (this.data) {
  for (let course of this.data.courses) {
    let courseFormGroup = this.newCourseFromGroup();
    courseFormGroup.patchValue(course);

    this.courses.push(courseFormGroup);
  }
} else {
  this.addCourse();
}

演示@StackBlitz