cdkVirtualFor 不显示任何内容

Question

我有一个包含以下代码的对话框，其中显示了几个mat-card. 该代码完美地配合ngfor并显示了我的期望。但因为卡片数量较多，所以我决定使用cdkScrolling，但是当我添加代码时，它没有显示任何内容，尽管它在代码中渲染了。并且页面几乎显示为空白。\n有人知道问题出在哪里吗？我是否错误地实施了它？

\n

对话框.html：

\n

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

\n

Answer 1

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

.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>