角7-虚拟滚动与异步订阅相结合

Question

我正在使用async在我的Range7项目中自动订阅我想要显示的数据。数据显示为一个包含大约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>

对于我来说，还不清楚如何使用角7这个新特性来只使用我的管道async | searchFilter: {keyName: searchText}来呈现可视数据。

由于性能原因，我想试用这个特性。

Answer 1

棱角材料团队已经在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周围的括号)。
• 除了使用上面提到的*cdkVirtualFor指令之外，您不必更改访问数据的方式；它的使用方式与*ngFor完全相同

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