Как использовать один FormArray внутри вложенного * ngFor?

Question

У меня есть FormGroup, которая содержит FormArray. FormArray интегрирован с кодом multi checkbox. Эти мульти-флажки на самом деле представляют подкатегории внутри родительских категорий. Родительские категории не могут быть выбраны. но подкатегории есть. Когда я назначил значения, которые уже выбраны из файла TS. я устанавливаю статус FormControl в true и вставляю его в formArray в последовательности. Например. Запуск цикла 1, затем запуск цикла 2, а затем на основе состояния выбранного значения цикла 2 я создал FormControl со значением true и помещен в FormArray.

Теперь проблема заключается в том, когда я представляю этот массив массива в HTML-файле. внутри вложенного Ng для меня нужно предоставить только увеличенные значения в FormControl, как вы можете видеть на кодах ударов. Но я понятия не имею, как этого добиться. потому что ngFor loop1 предоставит индекс i, а ngFor loop2 предоставит индекс j, но мне нужен индекс k на основе общей итерации.

Я пробовал индекс j ngFor loop2 внутри FormControlName, но, как вы знаете, это будетповторять много раз с самого начала, следовательно, будет один и тот же контроллер имени. и, следовательно, если я выберу первый элемент первой категории, он покажет мне, что он выбран для всех первых подкатегорий категорий.

<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>