Angular cdkVirtualFor不显示任何内容

我有一个带有以下代码的对话框，其中显示了几个

mat卡

。该代码与

ngfor

完美配合，并显示了我的期望。但是因为卡片的数量很大，我决定使用

cdkScrolling

，但是当我添加代码时，它没有显示任何内容，即使它是在代码中呈现的。页面几乎显示为空白。 有人知道问题出在哪里吗？我执行得不对吗

dialog.html：

    <div style="direction: rtl;position: relative" fxLayout="row wrap" fxLayoutAlign="space-around right">
  <ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" size="medium" color="#fff" type="ball-clip-rotate"
               [fullScreen]="false"></ngx-spinner>
  <div fxFlex="100">
    <mat-card style="text-align: center; font-size: 13px">
      <mat-card-header style="flex-direction: row; box-sizing: border-box; display: flex;">
        <img mat-card-avatar #avatarPic [src]="data.selectedPage.profilePicUrl"
             (error)="avatarPic.src = 'assets/images/default_image-4_3-640x360.png'"
              >
        <mat-card-title>
          {{data.selectedPage.userName}}
        </mat-card-title>
        <mat-card-subtitle>
          {{data.selectedPage.bio}}
        </mat-card-subtitle>
        <span style="width: 100%"></span>
        <button mat-button (click)="close()">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
      </mat-card-header>
      <mat-divider style="border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>
      <div fxLayout="row wrap" fxLayoutAlign="center center" style="font-size: 16px;margin: 10px">
        <div fxFlex="50"> تعداد دنبال کننده: {{data.selectedPage.followerCount}} </div>
        <div fxFlex="50" style="border-right: 1px solid rgb(103, 102, 102);">  تعداد دنبال شونده: {{data.selectedPage.followingCount}} </div>
      </div>
      <mat-divider style="border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>
    </mat-card>
  </div>
  <cdk-virtual-scroll-viewport itemSize="500">
  <div *cdkVirtualFor="let media of medias" fxFlex="33.33">
    <mat-card>
      <mat-card-content style="height: 500px">
        <img #postImage (error)="postImage.src = 'assets/images/default_image-4_3-640x360.png'"
             [src]="media.imageUrl" style="width: 100%;height: 256px">
        <p style="height: 200px;overflow-x: hidden">{{media.caption}}</p>
      </mat-card-content>
      <button mat-button style="width: 100%;margin-bottom: 5px">دریافت کامنت ها</button>
      <mat-divider></mat-divider>
      <mat-card-actions style="padding: 10px;position: relative;display: flex">
        <div class="show-profile-likes">
          <mat-icon style="vertical-align: bottom;font-size: 15px">thumb_up_alt</mat-icon>
          {{media.likesCount}}
        </div>
        <div class="show-profile-comments">
        <mat-icon style="vertical-align: bottom;font-size: 15px">insert_comment</mat-icon>
        {{media.commentsCount}}
      </div>
        <div class="show-profile-date">
          <mat-icon style="vertical-align: bottom;font-size: 15px">insert_invitation</mat-icon>
          {{ media.takenAt | persianDate}}
        </div>
      </mat-card-actions>
    </mat-card>
  </div>
</cdk-virtual-scroll-viewport>
</div>

{{data.selectedPage.userName}
{{data.selectedPage.bio}
键盘退格
ت㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧㶧15
تعدددددددددددددددددددددددد
{{media.caption}
دریافت کامنت ها
拇指向上
{{media.likescont}
插入注释
{{media.commentscont}
插入邀请
{media.takenAt | persianDate}

您需要定义视口高度。请参阅中的一个简单实现

.cdk视口{
高度：计算（100vh-60px）；
宽度：100vw；
}

山脉{{num}

喜马拉雅山是亚洲的一座山脉。

喜欢
分享

您应该导入ScrollDispatchModule：

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

并将其添加到NgModule的inports数组中：

@NgModule({
  ...
  imports: [
    ScrollDispatchModule
  ],
  ...
})