gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:34:46 25 4
gpt4 key购买 nike

我在我的 Angular 7 项目中使用 async 来自动订阅我想要显示的数据。数据显示为包含大约 2000 项的表格。

以下代码来 self 的模板:

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

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

最佳答案

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>

注意事项:

  • 代替表行的 *ngFor 指令,你应该是使用 *cdkVirtualFor 指令
  • 您必须将整个表格包裹在一组标签并指定高度itemSize(不要忘记 itemSize 两边的括号)
  • 除了如上所述使用 *cdkVirtualFor 指令外,您不必更改访问数据的方式;它旨在以与 *ngFor 完全相同的方式使用

可以在此处找到有关对表格和列表使用虚拟滚动的更多信息:https://material.angular.io/cdk/scrolling/overview#elements-with-parent-tag-requirements

关于Angular 7 - 虚拟滚动与异步订阅相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53392062/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com