时间戳

首页 > 解决方案 > 虚拟滚动中的角材质扩展面板

html - 虚拟滚动中的角材质扩展面板

问题描述

我的网站上有一个虚拟滚动功能。虚拟滚动中的每个项目都是扩展面板，其中包含不同的行数。当我实现 <cdk-virtual-scroll-viewport>扩展面板时渲染得很好，但是当我单击当前面板时它不会扩展并且只会将他的高度增加 5 px。我不知道怎么做，那个扩展面板会正常展开。

我试图将扩展面板移动到<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>

标签： htmlangularangular-material

解决方案

我终于发现问题出在哪里了。我在扩展面板的 scss 文件高度中设置为 50 像素，因此无法扩展更多。当我删除它时，一切正常。

推荐阅读