cdkVirtualFor 不显示任何内容

Question

我有一个包含以下代码的对话框，其中显示了几个 mat-card。该代码与 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>

Answer 1

您需要定义视口高度。在 CodeSandbox Implementation.

参考一个简单的实现

.cdk-viewport {
    height: calc(100vh - 60px);
    width: 100vw;
}

<cdk-virtual-scroll-viewport
    fxLayout="row wrap"
    fxLayoutGap="16px grid"
    itemSize="400"
    class="cdk-viewport"
  >
    <mat-card
      class="mat-elevation-z4"
      *cdkVirtualFor="let num of [1,2,3,4,5,6,7]"
    >
      <mat-card-header>
        <mat-card-title>Mountains {{num}}</mat-card-title>
      </mat-card-header>
      <img mat-card-image src="./../assets/images/mountains.jpg" />
      <mat-card-content>
        <p>
          The Himalayas is a mountain range in Asia.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </cdk-virtual-scroll-viewport>

Answer 2

您应该导入一个 ScrollDispatchModule：

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

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

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

cdkVirtualFor 不显示任何内容

cdkVirtualFor does not display anything

angular-material

angular

angular-cdk