如何根据服务响应在模板中动态定义FormArray？

Question

我有一个表格，允许用户从课程列表中进行选择。这些课程将根据表格中的字段进行过滤。该服务返回一个observable，并带有已过滤数组的结果。然后，组件模板显示课程列表以及每个课程的复选框。复选框控件位于FormGroup中的FormArray中。问题是我无法从模板中的服务结果中找出如何定义FormArray。

反应形式在ngOnInit（）函数中初始化

  public ngOnInit() {

    this.CourseForm = this.CourseFormBuilder.group({
        Institution: ['', Validators.required],
        Department: ['', Validators.required],
        NewCourses: this.CourseFormBuilder.array([])
    })

    // Institution AutoComplete
    this.CourseForm.get('Institution').valueChanges
    .pipe(
      startWith(''),
      debounceTime(300),
      map(value => this.Search('Institution',{Name: value})));
  }

服务呼叫如下：

  public get Courses() : Observable<ICourse []> {
    return this.CourseServ.Read(this.SelectedDepartment.Id).pipe(map((CourseMap : IResponseObject<ICourse>) => CourseMap.Array))
  }

组件模板提示：

<div class="mat-elevation-z8">
    <mat-table #table [dataSource]="CourseList">

        <mat-header-row *matHeaderRowDef="DisplayedCourseColumns"></mat-header-row>
        <mat-row *matRowDef="let row; Columns: DisplayedCourseColumns;"></mat-row>

        <!-- Checkbox Column -->
        <ng-container matColumnDef="Selected">
            <mat-header-cell *matHeaderCellDef>Select</mat-header-cell>
            <mat-cell *matCellDef="let course; let FormIndex = index" [formGroupName]="CourseForm"> 
            <mat-checkbox [formControl]="NewCourses[FormIndex]"></mat-checkbox>
            </mat-cell>
        </ng-container>

        <!-- Course Id Column -->
        <ng-container matColumnDef="Id">
            <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
            <mat-cell *matCellDef="let Course"> {{Course.Id}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="Name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let Course"> {{Course.Name}} </mat-cell>
        </ng-container>

这里缺少的部分是我将课程从数据源推送到FormArray NewCourses的地方。