虚拟滚动中的角材料扩展面板

Question

我的网站上有虚拟滚动功能。虚拟滚动中的每个项目都是扩展面板，其中的行数不同。当我实现<cdk-virtual-scroll-viewport>时，扩展面板可以很好地显示，但是当我单击当前面板时，它不会扩展，只能将其高度增加5像素。我不知道该怎么做，该扩展面板会正确扩展。

我尝试将扩展面板移至<ng-container>，但id并没有帮助。

<div class="container">
  <mat-card>
        <mat-card-title>
          <span class="panelItem">Id</span>
          <span class="secondPanelItem">Name</span>
          <span class="lastPanelItem">Version</span>
        </mat-card-title>
  </mat-card>
  <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
    <mat-accordion>
      <ng-container *cdkVirtualFor="let description of allDescriptions">
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <span class="panelItem">{{description.id}}</span>
              <span class="secondPanelItem">{{description.name}}</span>
              <span class="lastPanelItem">{{description.version}}</span>
            </mat-panel-title> 
          </mat-expansion-panel-header>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>
  </cdk-virtual-scroll-viewport>
</div>

Answer 1

我终于找到了问题所在。我在扩展面板的scss文件高度中设置为50 px，所以它不能再扩展了。当我删除此按钮后，一切正常。