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

我在Angular 7项目中使用

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>

显示一些数据：{s.someProperty}

我不清楚如何使用Angular 7的这一新功能仅渲染仍然使用my pipes的可视数据

async | searchFilter:{keyName:searchText}

---

出于性能原因，我想尝试此功能。

Angular Material团队在上开发了一些很好的文档，以帮助您成功应用其软件包的任何功能。特别是，您的代码可以很容易地更改为使用虚拟滚动

在您的模块（app.module.ts或特定功能的模块）中：

然后，在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>

显示一些数据：{s.someProperty}

注意事项：

• 您应该 使用*cdkVirtualFor指令
• 你必须把整个桌子包起来 一组标记，并在中指定高度 itemSize（不要忘记itemSize周围的括号）
• 您不必更改访问数据的方式，只需使用上面提到的*cdkVirtualFor指令；它的设计使用方式与*ngFor完全相同

---

有关在表格和列表中使用虚拟滚动的更多信息，请参见此处：

到目前为止您尝试了什么？一个简单的括号包装器不应该工作吗<代码>（数据异步）|搜索过滤器..？

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