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

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所以它不能扩展更多。 当我删除这一切都没关系。