Блог

У меня есть диалоговое окно со следующим кодом, который показывает несколько 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>
 

Вам нужно будет определить высоту окна просмотра. Обратитесь к простой реализации в 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> 

Вы должны импортировать ScrollDispatchМодуль:

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

И добавьте его в массив inports в NgModule:

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