ngbCollapse collapse не работает для нескольких div, которые являются динамическими на одной странице - PullRequest
Новая
       17

ngbCollapse collapse не работает для нескольких div, которые являются динамическими на одной странице

1 голос
/ 02 октября 2019

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>

1 Ответ

0 голосов
/ 03 октября 2019

Решено! .. 

<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)="[pdict.key =! pdict.key]" [attr.aria-expanded]="!isCollapsed[i]" aria-controls="collapseForm" ng-model="isCollapsed">Add_Sun</button>

        <div id="collapseForm" [ngbCollapse]="pdict.key">
        <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>
...