Angular FormControl CheckBox 选择标记每个兄弟

Question

StackBlitz：http://stackblitz.com/edit/angular-jul7bv

我在使用 Angular FromControl 时遇到问题，它是基于 od 传递的数据动态创建的。

我的列表显示特定数据的组和子组，一切工作几乎完美无缺，但每当我检查子组时，它的每个兄弟都被标记，我无法找出问题所在。

这是我的html：

<div *ngFor="let chapter of checkboxControlLabels; let i = index;">
      <div class="input-checkbox-subgroup-list__checkbox">
        <div class="input-checkbox">
          <input type="checkbox" [attr.id]="chapter.id + '_checkboxControl_' + i"
            [formControl]="getChapterControl(i)" />
          <label [attr.for]="chapter.id + '_checkboxControl_'+ i">{{ chapter.title }} </label>
        </div>
      </div>
      <div class="input-checkbox-subgroup-list__checkbox" *ngFor="let chart of chapter.charts; let x = index;">
        <div class="input-checkbox chart">
          <input type="checkbox" [attr.id]="chart.title + '_checkboxControl_' + x" [formControl]="getChartControl(i, x)" />
          <label [attr.for]="chart.title + '_checkboxControl_' + x">{{ chart.heading }} </label>
        </div>
      </div>
    </div>

这就是我映射特定 FormControl 的方式：

  getChartControl(chapterIndex: string, chartIndex: number) {
    return this.data.controls[chapterIndex].get('charts').controls[chartIndex];
  }

当我检查子组时，如下图所示，有 11 个被选中，我不知道这怎么可能。

更有趣的是，这不适用于组...所以如果我检查第一个组，则只会选择一个...

这是我稍后使用的 FormGroupModel：

this.chapterChartsData.forEach(chapters => {
      dataForm.push(new FormGroup({
        chapter: new FormControl(false),
        charts: new FormArray(Array(chapters.charts.length).fill(new FormControl(false)))
      }))
    });

Answer 1

显然问题在于填充这样的表单控件列表：

charts: new FormArray(Array(chapters.charts.length).fill(new FormControl(false)))