angular - 带有 Bootstrap 折叠的嵌套 *ngFor

Question

几个小时以来，我一直在思考如何让它发挥作用。
到处找，没找到写的例子。
我使用 j 作为索引的第二个 block 不会扩展 ???

这是我的代码..

<div class="col-xs-2">
    <div class="list-group list-group-root well">
         <span *ngFor="let region of locations; let i = index">
            <a  class="list-group-item"
                data-toggle="collapse" 
                [attr.data-target]="'#' + i" 
                (click)="centerOn(region.name, region)">
                <i class="glyphicon glyphicon-chevron-right"></i>{{ region.name }}
            </a>
            <div class="list-group collapse" [attr.id]="i">
                <span  *ngFor="let city of region.cities; let j = index">
                    <a  class="list-group-item" 
                        data-toggle="collapse"
                        [attr.data-target]="'#' + j"
                        (click)="centerOn(city.name, city)">
                        <i class="glyphicon glyphicon-chevron-right"></i>{{ city.name }}
                    </a>
                    <div class="list-group collapse" [attr.id]="j">
                        <span  *ngFor="let cityArea of city.areas">
                            <a  class="list-group-item" 
                                data-toggle="collapse"
                                (click)="centerOn(cityArea.name, cityArea)">
                                {{ cityArea.name }}
                           </a>
                    </span>
                </div>
            </span>
        </div>
    </span>
</div>

Answer 1

在咨询了专业工程师后，我让它开始工作了!
我在两个地方都为 j 索引 + i 索引添加了一个前缀，瞧 :)

[attr.data-target]="'#' + 'prefix' + j + i"    
[attr.id]=" 'prefix' + j + i"    

祝你好运!