<div class="shrinkable-grouping-list">
    <div class="list-group" *ngFor="let item of items">
        <ion-card  class="list-card">
            <ion-card-header  class="list-card-header">
                <div class="list-group-container">
                    <ion-item lines="none">
                        <ion-label>{{item.name}}</ion-label>
                        <span *ngIf="item.items && item.items.length > 6" class="shrink-button"
                            [ngClass]="{'open': item.isOpen}" slot="end" (click)="openChange(item)">全部<ion-icon
                                src="./assets/icon/solid-arrow-left.svg"></ion-icon></span>
                    </ion-item>
                </div>
            </ion-card-header>

            <ion-card-content class="list-card-content">
                <ng-container *ngIf="item.items">
                    <ion-grid class="list-group-content">
                        <ion-row [ngClass]="{'open': item.isOpen}">
                            <ng-container *ngFor="let child of item.items;let i = index;">
                                <ion-col size="4" *ngIf="(i < 6) || item.isOpen" (click)="onClick(child)">
                                    <div class="list-item">
                                        {{child.srfmajortext}}
                                    </div>
                                </ion-col>
                            </ng-container>
                        </ion-row>
                    </ion-grid>
                </ng-container>
            </ion-card-content>
        </ion-card>
    </div>
</div>