При зацикливании ответа API в аккордеонном меню данные отсутствуют в Angular4

Question

Я связываю привязку ответа API (json) в меню аккордеона, здесь все работает нормально, но в аккордеоне у меня есть категория, группа и подгруппа.

В категории есть одно значение json, В группе 4 значения, но в моем случае это только одно обязательное Каждая группа имеет 2 подгруппы

Здесь я приложил рабочий пример моего дела. Пожалуйста, ознакомьтесь с этим и помогите мне связать все данные в json

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-klfe6q?file=app/app.component.html

Answer 1

Ваша директива *ngFor неверна. Пожалуйста, посмотрите обновленный фрагмент StackBlitz:

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ptkgdm?file=app/app.component.html

Answer 2

Проблема в том, что вы запускаете *ngFor и устанавливаете те же id с и data-target с. Чтобы решить это, вы можете использовать индексы *ngFor создает в каждом цикле.

Чтобы использовать их, вы должны назначить шаблонное выражение для атрибутов HTML. Пример:

<div *ngFor='let group of data; let j=index'>
  <input [id]="'id' + j" />
</div>

См. ДЕМО здесь

Answer 3

Используйте этот код:

<div id="collapseTwo"  class="accordion-body collapse" style="margin-left:10px">
            <div class="accordion-inner" *ngFor='let group of data?.group; let j=index'>
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo_{{j}}">
                                {{group?.CAMD_PRGRP_DESC}}
                            </a>
                        </div>
                        <div id="collapseInnerTwo_{{j}}" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">
                            <div class="accordion-inner" *ngFor='let subgroup of group?.subgroup; let i=index'>
                                {{subgroup?.CAMD_PRSGRP_DESC}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>