angular - Angular 7-结合了异步订阅的虚拟滚动

我在我的Angular7项目中使用async来自动订阅我想要显示的数据。数据显示为一个包含大约2000个项目的表。
以下代码来自我的模板：

<table class="table table-responsive">
  <tr *ngFor="let s of data | async | searchFilter: {keyName: searchText}">
    <td>Display some data: {{s.someProperty}}</td>
  </tr>
</table>

我不清楚如何使用angular 7的这个新特性，仅在仍在使用管道的情况下渲染可视数据。
由于性能原因，我想尝试此功能。

最佳答案

角材料团队在https://material.angular.io中开发了一些很好的文档，以帮助您成功地应用它们的包的任何特征。特别是，您的代码可以很容易地更改为使用虚拟滚动。
在您的模块中（app.module.ts或特定功能的模块）：

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

@NgModule({
  imports: [
    // other imports,
    ScrollingModule,
  ],
  // other normal module declaration stuff
})
export class AppModule { }

然后，在component.html中：

<cdk-virtual-scroll-viewport [itemSize]='32'> <!-- or whatever the size of each item is -->
  <table class="table table-responsive">
    <tr *cdkVirtualFor="let s of data | async | searchFilter: {keyName: searchText}">
      <td>Display some data: {{s.someProperty}}</td>
    </tr>
  </table>
</cdk-virtual-scroll-viewport>

注意事项：
与表行的*ngfor指令不同，您应该
使用*cdkVirtualFor指令
你必须把整张桌子包起来
一组标记并指定
itemsize（不要忘记itemsize周围的括号）
您不必改变访问数据的方式，除了使用上面提到的*CDKValualOf指令；它被设计成与*NGOF完全相同的方式使用。
有关对表和列表使用虚拟滚动的更多信息，请访问：https://material.angular.io/cdk/scrolling/overview#elements-with-parent-tag-requirements