虛擬滾動中的角度材料擴展面板

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所以它不能擴展更多。 當我刪除這一切都沒關系。