Question

我具有以下结构：

<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只会在expandedItems中添加和删除。

CSS：

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

.table-collapsed {
  height: unset;
}

我需要更新CSS table-collapsed和table-expanded，因为每个div中的内容各不相同。

mat-tab包含mat手风琴

0 个答案: