如何在嵌套的* ngFor中使用单个FormArray？

Question

我有一个FormGroup，其中包含一个FormArray。 FormArray与多个复选框代码集成在一起。这些多复选框实际上表示父类别中的子类别。父类别不能选择。但子类别是。当我分配了已经从ts文件中选择的值时。我将FormControl的状态设置为true并按顺序将其推入formArray中。例如。循环1开始，然后循环2开始，然后根据循环2的值选择状态，我创建了值为true的FormControl并将其推入FormArray中。

现在的问题是当我在HTML文件中显示此FormArray时。在嵌套的NgFor内部，我需要在FormControl中仅提供增量值，如打击代码所示。但是我不知道如何实现这一目标。因为ngFor loop1将提供索引i，而ngFor loop2将提供索引j，但根据总迭代的进行，我需要索引k。

我已经在FormControlName中尝试了ngFor loop2索引j，但是您知道这将从开始就重复很多次，因此会有相同的名称控制器。因此，如果我选择第一类的第一项，它将显示我为所有第一类子类别选择了一项。

<div class="row" *ngIf="categories">
    <div class="col-md-3" *ngFor="let category of categories">
        <h4> {{category.name}}</h4>
            <div formArrayName="specialization">
                <p *ngFor="let sub_category of category.sub_categories; index as i">
                <label>
                   <input [formControlName]="i" type="checkbox" value="{{sub_category.id}}"                                       (change)="onChecked($event)" />
                   <span>{{sub_category.name}}</span>
                </label>
            </p>
        </div>
    </div>
</div>

Answer 1

只需使用索引的乘积（略固定即可获得正确的顺序）：

<div class="row" *ngIf="categories">
    <div class="col-md-3" *ngFor="let category of categories; index as i">
        <h4> {{category.name}}</h4>
            <div formArrayName="specialization">
                <p *ngFor="let sub_category of category.sub_categories; index as j">
                <label>
                   <input [formControlName]="(i + 1) * j" type="checkbox" value="{{sub_category.id}}"                                       (change)="onChecked($event)" />
                   <span>{{sub_category.name}}</span>
                </label>
            </p>
        </div>
    </div>
</div>