While looping API response in accordion menu data missing in Angular4

Question

I am tying to bind the api response (json) in accordion menu ,Here everything is working fine but in accordion I have category,group and subgroup .

In category there is

Answer 1

The problem is that you run *ngFor and set same ids and data-targets. To solve that you can use indexes *ngFor creates in every loop.

To use them you must assign a template expression to HTML attributes. Example:

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

See the working DEMO here

Answer 2

Your *ngFor directive is on the wrong element. Please look at the updated StackBlitz snippet:

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

Answer 3

Use this code:

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