вкладки с мат-гармошкой - PullRequest
Новая
       40

вкладки с мат-гармошкой

0 голосов
/ 27 февраля 2019

У меня есть следующая структура: 

<mat-tab-group>
    <mat-tab>
        <component-1>
    <mat-tab>
        <component-2>

Каждый component-1 и component-2 имеет mat-accordion: 

<mat-accordion multi="true">
    <mat-expansion-panel *ngFor="let item of items; let i = index" 
        [expanded]="expandedItems.includes(i)">

Теперь, изначально, когда я нахожусь на вкладке 1панели разрушены.Затем я расширяю одну панель.Далее я перехожу на вкладку 2. Панели на вкладке 2 изначально свернуты.Затем я раскрываю одну панель.

Затем я возвращаюсь к вкладке 1. Я вижу, что панель развалилась.Этого не может быть, потому что я проверяю, включает ли expandedItems эту панель.Я уверен, что expandedItems включает эту панель, потому что я использую ту же проверку при стилизации моего mat-expansion-panel-header.Я помещаю определенный стиль в заголовок, когда панель находится в expandedItems.

Кроме того, то же самое происходит, когда я возвращаюсь к вкладке 2. Панель также свернута.

ПочемуПанель рухнула, даже если я расширил ее изначально.Содержимое height становится 0, а visibility становится скрытым.Это происходит только один раз.После того, как эти панели рухнули, я нажимаю на панель.Но это не сдвинулось с мертвой точки.Это как если бы оно было расширено, но оно действительно рухнуло.Поэтому я снова нажимаю на заголовок, и он расширяется.Затем при последующем переходе с одной вкладки на другую панели остаются развернутыми, что является моим ожидаемым поведением.

ОБНОВЛЕНИЕ 

<mat-accordion multi="true">
<mat-expansion-panel *ngFor="let item of items; let i = index" [expanded]="expandedItems.includes(i)"
                     (opened)="openPanel(i)" (closed)="closePanel(i)">
  <mat-expansion-panel-header>
    <mat-panel-title [class.open-panel-title-color]="expandedItems.includes(i)">
      <span>{{item.name}}</span>
    </mat-panel-title>
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>
    <div [class.table-expanded]="expandedItems.includes(i)"
                     [class.table-collapsed]="!expandedItems.includes(i)"></div>
  </ng-template>
</mat-expansion-panel>
</mat-accordion>

openPanel и closePanel будетпросто добавьте и удалите из extendedItems.

CSS: 

.table-expanded {
  position: relative;
  height: 517px;
}

.table-collapsed {
  height: unset;
}

Мне нужно обновить CSS table-collapsed и table-expanded, потому что содержимое внутри каждого div отличается.

...