在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