ngbCollapse динамически генерирует в главном цикле for, который проверяет Sun в json obj, если sun там нет, то дает возможность Add_Sun (). Поскольку он находится в цикле, он добавляет каждую строку в add_sun. при нажатии на кнопку «Добавить Солнце» isCollapsed [i] делятся коллапсы коллапса и наоборот закрываются. Есть ли способ указать коллапс только для одного открытия и закрытия 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>