如何修复 Angular 9 应用程序中的 CDK 虚拟滚动。 [PokeDex 应用程序]答案

【问题标题】：How to fix CDK Virtual Scrolling in Angular 9 App. [PokeDex App]如何修复 Angular 9 应用程序中的 CDK 虚拟滚动。 [PokeDex 应用程序]
【发布时间】：2020-05-03 07:01:47
【问题描述】：

在这里，首先你可以在没有虚拟滚动的情况下查看应用的当前状态：

PokeDex - Webapp

Image Preview Of the Website Here

滚动非常流畅，但是您可以看到搜索和来回导航有点慢，因为需要重新加载 DOM。它不是很慢的搜索逻辑，因为我只是使用一个简单的管道来过滤仅基于口袋妖怪名称和 ID 的口袋妖怪列表。我已经测试并发现罪魁祸首是 DOM 中元素的疯狂数量。（每个口袋妖怪物品中都有嵌套的Divs）

没有虚拟滚动的口袋妖怪列表组件。：

<div class="row justify-content-center">
   <app-pokemon-item *ngFor="let pokemon of pokemons | searchFilter: searchItem; let i = index;"
                      [pokemon]="pokemon"></app-pokemon-item>
</div>

所以现在我正在尝试实现虚拟滚动以提高性能，但发生了这种情况：

列表在滚动时关闭很多。（感觉不像正常滚动）。
口袋妖怪图像受到干扰（随机/随机）。
图像甚至不是静态的，单个口袋妖怪的图像在上下滚动时会发生变化。
我还想保留以前的网格外观。

修改了虚拟滚动的口袋妖怪列表组件。

<cdk-virtual-scroll-viewport style="height: 90vh" itemSize="100">
  <ng-container *cdkVirtualFor="let pokemon of pokemons | searchFilter: searchItem; let i = index;">
    <app-pokemon-item [pokemon]="pokemon"></app-pokemon-item>
  </ng-container>
</cdk-virtual-scroll-viewport>

The Problem

【问题讨论】：

标签： angular angular-cdk angular-cdk-virtual-scroll

【解决方案1】：

我遇到了和你一样的问题，并通过添加 templateCacheSize: 0 来解决它。

已回答here

【讨论】：