问题标签 [virtualscroll]

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

以下代码来自我的模板：

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

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

我有一个带有自动调整大小策略的虚拟卷轴。如果我从一开始就滚动它，它工作正常。但是我最终需要在页面加载时移动它。问题是它无法正确计算。已加载项目的使用平均值。也许有人面临这个问题并知道如何解决它

是否有适用于网格列表的虚拟滚动实现？我认为默认实现不起作用，因为每一行都应该有一个元素。

我正在使用网格列表来显示个人资料图片，并且需要无限滚动或最好是虚拟滚动来加载新的。

场景：我在Angular7项目 ( https://stackblitz.com/edit/angular-efdcyc ) 上运行一个非常基本的测试，该项目还在“@angular/cdk/scrolling”中使用ScrollingModule 。

问题：有什么办法可以解决下面的错误吗？我错过了什么吗？

我的spec.ts文件中的简单测试

错误：

错误：模板解析错误：无法绑定到“cdkVirtualForOf”，因为它不是“div”的已知属性。("

嵌入式模板。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。("

ng:///DynamicTestModule/countriesComponent.html@13:12 'cdk-virtual-scroll-viewport' 不是已知元素： 1. 如果 'cdk-virtual-scroll-viewport' 是 Angular 组件，则验证它是否是这个模块的一部分。2. 如果“cdk-virtual-scroll-viewport”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。("

( http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:14851:1 ) 在 JitCompiler.push ../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate ( http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24570:1 ) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate ( http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24557:1 ) 在http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?: 24500:48 在 Set.forEach () 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24500:1）在http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24418 :1 在 Object.then ( http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:1012:33 ) 在 JitCompiler.push ../node_modules/@angular/compiler/fesm5/compiler .js.JitCompiler._compileModuleAndAllComponents ( http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:24416:1 )

我正在使用<cdk-virtual-scroll-viewport>固定项目大小进行虚拟滚动。

此外，我使用ActiveDescendantKeyManagerCDK A11y 提供的在视口内使用箭头键移动。

当我尝试同时使用它们时，我遇到了以下问题：

由于虚拟滚动只加载部分信息并在滚动（回收视图）时加载更多信息，因此ActiveDescendantKeyManager仅获取<cdk-virtual-scroll-viewport>. 当我加载更多时，索引会重复自己，因为虚拟滚动添加和删除项目，keyManager只是表现得很奇怪，因为我希望索引是有序的（如果我有 5000 个项目，我希望索引是有序的，不仅来自1-24，每次我滚动它们都会重复）。 这是stackblitz的一个例子

我的问题是：有没有办法与他们一起工作？因为我想做的是用箭头键移动到以下滚动索引。

在移动端尤其明显。只要用户滚动，它就会立即刷新，如果用户快速滚动，很难渲染？

我想创建一个非常大的 html 表的 pdf。

我使用 Angular Material 7 虚拟滚动来创建该表。

这是html模板代码：

这是负责创建 pdf 的组件函数：

问题是仅（01）创建了少于 30 行的一页，其余行保持不变。

那么，这种情况是因为我使用虚拟滚动来呈现表格吗？

我该怎么做才能将我的所有表格都转换为 pdf？

我开始怀疑我不了解 Angular 的材质表实现，或者虚拟滚动的概念，或者两者兼而有之:-)

据我了解，虚拟滚动是一种用于限制在滚动大量数据（例如表格）时需要呈现的 DOM 元素数量的技术。我们有一个大小为 N 的视口，比如 5 个元素，我们通过它“查看”表格。滚动时，我们查看的 5 个元素的内容发生了变化，但 DOM 始终只渲染 5 个元素。

https://material.angular.io/components/table/overview#pagination中的 Angular 材质表示例在我看来似乎在做同样的事情。

如果我们查看该页面的 DOM 元素，我们选择的页面大小为 5，而 DOM 仅在表格中呈现 5 行：

所以我的问题很简单：这是不是虚拟卷轴？

我尝试将 Angular Virtual 合并到我的一个组件中，它在浏览器上可以正常工作。但是，当我尝试编写相同的测试用例时，Karma 运行器在初始化组件时会引发以下一组错误：

我尝试将 ScrollingModule 导入到我的 .spec 文件以及上面 Karma 工具给出的建议，但它仍然失败。

我当前的规范文件和 app.module.ts 文件（组件所在的位置）如下所示：

.spec 文件：

app.module.ts

所以我有一个有 50 列和大约 4-600 行的表，性能很差。有一些计算属性正在使用中。表格单元格是输入、选择和文本区域。

我使用vue-scrolling-table，因为我需要垂直和水平滚动，并固定第一列。但是性能真的很差。

我也有相同的设置，其他地方是应用程序，但它没有相同的性能问题。

我已经尝试使用虚拟列表，但我无法让它与 vue-scrolling-table/ 一起使用（标题没有跟随滚动，只有当我滚动到底部时垂直滚动条才可用）我还查看了虚拟滚动条，但建议不要与输入等一起使用，因为它正在替换输入中的数据，这会触发更改事件等。

我有一个 v-for，它遍历数据，一个 v-for 在里面，用于列中的一个子集。（我不能确定会有多少列。）

这应该可以正常工作。我正在使用的数据不是那么大，它应该会导致问题。我尝试在这方面做任何事情，cpu 旋转到 100%，一切都发生了 2 秒的延迟。

我还发现了一件有趣的事情，选择会在 3 秒内打开。我觉得这很好奇。

当我使用虚拟列表时，性能更好，但我需要一些其他的表解决方案。

有谁知道这和我的另一个之间有什么区别，它工作得很好（实际上更多的数据和更多的计算属性）所以我认为区别可能是选择和 v-for 渲染列（大约 20其中以这种方式呈现）。或者也许是文本区域？

提前致谢！