Angular反应形式，不会在传入数据上生成复选框

有一个带有过滤器的表格。我通过FormBuilder创建表单。静态数据没有问题，但是我无法处理传入的数据。我需要在航空公司中呈现一组复选框，类似于transferFilter。在pathValue的帮助下，我将该字段的值更改为已处理的数据，出现了10个元素。在

{{filtersForm.value | json}}

形成一组复选框的方法：

private mapToCheckboxArrayGroup (data: string [], display): FormArray {
    return this.fb.array (
      data.map ((val, i) => {
        return this.fb.group ({
          value: val,
          display: display [i],
          selected: false,
        });
      })
    );
  }

我创建一个组：

filtersForm: FormGroup = this.fb.group ({
    sort: [this.priceSortItems [0] .attribute],
    transferFilter: this.mapToCheckboxArrayGroup (
      this.availableTransferValue,
      this.availableTransferDisplay
    ),
    minCost: [null],
    maxCost: [null],
    airlines: [null],
  });

我接收数据，进行处理并使用以下方法组成一个小组：

private refresh $ = new Subject ();

carriers $ = this.refresh $ .pipe (
    startWith (true),
    switchMap (() => this.dataService.getCarriers ()),
    map ((e) => {
      const keys = [... Object.keys (e)];
      const values ​​= [... Object.values ​​(e)];
      const airItems = this.mapToCheckboxArrayGroup (keys, values);
      return airItems;
    }),
    shareReplay (1)
  );

我对以下形式的更改做出反应：

filterData $ = this.refresh $ .pipe (
    startWith (this.filtersForm.value),
    switchMap (() => this.filtersForm.valueChanges),
    map ((e) => {
      console.log (e);
      console.log (this.filtersForm.controls);
    }),
    shareReplay (1)
  );

我订阅了数据更新，并通过PathValue将航空公司组的值从方法更改为formarray：

ngOnInit (): void {

    this.carriers $ .pipe (takeUntil (this.destroy $)). subscribe ((e) => {
      this.filtersForm.patchValue ({
        airlines: e.value,
      });
    });
}

我通过getter将包含数据的数组发送到模板：

get carrierFilterArray () {
    const carriers = this.filtersForm.get ('airlines') as FormArray;
    console.log (carriers.value);
    return carriers;
  }

HTML表单：

<form * ngIf = "filtersForm.value" [formGroup] = "filtersForm" class = "page__menu menu-page">
    <div class = "menu-page__sort" * ngIf = 'priceSortItems'>
      <h3 class = "menu-title"> Sort </h3>
      <div class = "menu-page__sort items" * ngFor = "let elem of priceSortItems; let i = index">
        <input formControlName = "sort" [value] = "elem.attribute" type = "radio" [id] = "elem.value" /> <label
          [for] = "elem.value"> {{elem.display}} </label> <br />
      </div>

      <div class = "menu-page__filter" formArrayName = "transferFilter">
        <h3 class = "menu-title"> Filter </h3>
        <div class = "menu-page__filter items" * ngFor = "let elem of transferFilterArray.controls; let i = index"
          [formGroup] = "elem">
          <input type = "checkbox" [formControl] = "elem.get ('selected')" [value] = "elem.get ('value'). value"
            [id] = "elem.get ('value'). value" />
          <label [for] = "elem.get ('value'). value"> {{elem.get ('display'). value}} </label> <br />
        </div>
      </div>

      <div class = "menu-page__price">
        <h3 class = "menu-title"> Price </h3>
        <p>
          From
          <input formControlName = "minCost" type = "text" />
        </p>
        <p> Before <input formControlName = "maxCost" type = "text" /> </p>
      </div>

      <div class = "menu-page__airlines" formArrayName = "airlines">
        <h3 class = "menu-title"> Airlines </h3>
        <div class = "menu-page__filter items" * ngFor = "let elem of carrierFilterArray.controls; let i = index"
          [formGroup] = "elem">
          <input type = "checkbox" [formControl] = "elem.get ('selected')" [value] = "elem.get ('value'). value"
            [id] = "elem.get ('value'). value" />
          <label [for] = "elem.get ('value'). value"> {{elem.get ('display'). value}} </label> <br />
        </div>
      </div>
      <pre> {{filtersForm.value | json}} </pre>
    </div>
  </form>

结果，除最后一个过滤器外，我得到了所有普通过滤器。在下面您可以看到json form.value，其中包含所有数据

我了解需要异步执行的操作，但我不知道如何执行该项目。•该项目具有教育意义，起初我是用纯JS制作的，现在我想在Angular中完成它。我将不胜感激小费。