Question

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

在类别中有一个值是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>

See the working DEMO here

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

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

3 个答案: