ngbCollapse折叠不适用于在一个页面中动态的多个div

Question

ngbCollapse在main for循环中动态生成，该循环检查json obj中的Sun，如果sun不存在，则为Add_Sun（）提供一个选项。由于处于循环中，因此将每一行分配给add_sun。当单击“添加太阳”按钮isCollapsed [i]时，折叠div将打开，反之亦然。有没有一种方法可以仅针对单个div的开和关指定索引的折叠？我无法控制mainarray。请提出建议。

    --------------component TypeScript-----------------

        export class MyComponent {
            public isCollapsed: boolean [] = [];
        }


    -----------------component HTML----------------
 <ng-container *ngFor="let obj of mainarray; let i= index">
 <ng-container *ngFor="let pdict of obj | keyvalue">
    <ng-container *ngFor="let pdictEle of pdict.value | keyvalue">

    <ng-container *ngIf="chkforSun(pdict.value)">

    <ng-container *ngIf="pdictEle.key =='Sun'">
    <button type="button" class="btn btn-primary" (click)="isCollapsed[i] =! isCollapsed[i]" [attr.aria-expanded]="!isCollapsed[i]" aria-controls="collapseForm" ng-model="isCollapsed">Add_Sun</button>

        <div id="collapseForm" [ngbCollapse]="isCollapsed[i]">
        <div class="table-container">
        <table style="width:100%">
        <tr><td align="left" width="50%"><label>Add Sun: </label></td>
        ............Some code to add items .........
        </tr></table>
    <label><button class="text-right"type="button"class="btn btn-info" (click)="add_sun(value)">Submit</button></label>
    <label><button class="text-left" type="button" class="btn btn-info" (click)="isCollapsed = true">Cancel</button></label>
         </div>
         </div>
        </ng-container>
        </ng-container>
        </ng-container>
        </ng-container>
        </ng-container>

Answer 1

（click）=“ isCollapsed [i] =！isCollapsed [i]”替换为（click）=“ [pdict.key =！pdict.key]”和[ngbCollapse] =“ pdict.key”。