Angular 带引导折叠的嵌套*ngFor

几个小时以来，我一直在想如何让它工作。
到处搜索都找不到编写示例。
我使用j作为索引的第二个块不会展开

这是我的密码

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

{{region.name}
{{city.name}
{{cityrea.name}

---

在咨询专业工程师后，我让它开始工作了
我在两个地方加了一个前缀到j index+I index，瞧：）

祝你好运

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