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

【问题标题】：How to use single FormArray inside nested *ngFor?如何在嵌套 *ngFor 中使用单个 FormArray？
【发布时间】：2020-02-20 07:03:59
【问题描述】：

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

现在的问题是当我在 html 文件中显示这个 FormArray 时。在嵌套的 NgFor 中，我只需要在 FormControl 中提供增量值，正如您在打击代码中看到的那样。但我不知道如何实现这一目标。因为 ngFor 循环 1 将提供索引 i，而 ngFor 循环 2 将提供索引 j，但我需要索引 k，因为总迭代正在进行。

我已经在 FormControlName 中尝试了 ngFor loop2 index 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>

【问题讨论】：

你也可以发布你的打字稿循环代码吗？

标签： angular angular8

【解决方案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>

【讨论】：