在Angular4中缺少手风琴菜单数据中循环API响应时

Question

我想在手风琴菜单中绑定api响应（json），这里一切正常，但在手风琴中我有category，group和subgroup。

在类别中，一个值是json，在组中有4个值，但在我的情况下，它仅绑定一个值每个组具有2个子组

在这里，我附上了我的案例的工作示例，请参考并指导我将json中的每个数据绑定

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

Answer 1

问题是您运行*ngFor并设置了相同的id和data-target 。 为了解决这个问题，您可以在每个循环中使用索引*ngFor创建。

要使用它们，必须将模板表达式分配给HTML属性。 例：

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

在这里查看有效的演示

Answer 2

使用此代码：

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

Answer 3

您的*ngFor指令位于错误的元素上。 请查看更新的StackBlitz片段：

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