Question

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

我不清楚如何使用Angular 7的这一新功能仅在仍使用管道async | searchFilter: {keyName: searchText}的情况下渲染可见数据。

由于性能原因，我想试用此功能。

Answer 1

Angular Material团队已在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>

注意事项：

应该使用* li代替表行的* ngFor指令使用* cdkVirtualFor指令
您必须将整个表包装在一组标签并在其中指定高度 itemSize（不要忘记itemSize周围的括号）
除了使用如上所述的* cdkVirtualFor指令外，您无需更改访问数据的方式；它的设计用途与* ngFor

有关在表和列表中使用虚拟滚动的更多信息，请参见：https://material.angular.io/cdk/scrolling/overview#elements-with-parent-tag-requirements

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

1 个答案: