问题标签 [virtualscroll]

到目前为止，我之前构建无限滚动器的所有尝试都失败了。我目前正在处理的组件使用 Angular 的虚拟滚动，并且应该在达到虚拟滚动视口的某个索引时更新数据源。虽然 BehaviorSubject 确实得到了更新，但我在视图中看不到新版本。

我的组件如下所示：

观点如下：

到目前为止，我已经尝试使用 ChangeDetectorRef 并手动触发它或将我的代码更新months到setTimeout()-function 中，但都没有工作。

我在垫子网格列表上添加了虚拟滚动条，如下所示

虽然我已经指定了 bufferAmount 但它不会加载缓冲的项目并且在结束时它不会使用我的自定义组件加载新项目。我的意思是我无法在 mat-grid-list 中看到我的客户组件呈现。我需要在我的 ngFor 中更新 scroll.viewPortItems 吗？？？

事件vsEnd的实现如下

我想首先它应该显示缓冲区以外的所有项目。如果缓冲区完成，则按照我的方法添加更多行。

任何帮助表示赞赏。

我尝试删除 bufferAmount 并更新我的方法，但没有任何效果。

我的自定义组件.html

ScrollerComponent.html.ts

ScrollerComponent.scss

滚动组件.ts

预期输出：

在向下滚动时，首先加载超过缓冲的元素，然后根据 onVsEnd 函数附加元素。目前它附加到数组但不显示我的自定义元素。它应该显示自定义元素。我可能需要更新视口......我没有得到它。

我想cdk-virtual-scroll-viewport在 TimeLine 视图中使用不同高度的项目。

itemSize="x"因此，根据文档，设置哪个是指列表中项目的大小（以像素为单位），是不切实际的。

autosize尚不可用。

是否可以使用cdk-virtual-scroll-viewport可变项目大小的虚拟/无限滚动？

更新

我一直在寻找替代的虚拟/无限滚动解决方案，我几乎不敢相信，似乎没有适用于动态行高的解决方案，即使使用https://github.com/rintoj/ngx-virtual-scroller也不推荐.

2019 年 7 月更新 2

由于同时仍然没有解决方案，我认为解决此问题的“足够好”的方法是加载固定数量的项目，并在列表底部添加一个按钮以加载更多项目，如下例所示：https://stackblitz.com/edit/ang-mat-load-more

我从 25 个批次的 rest api 获取数据。我正在使用虚拟滚动来显示数据。现在当这 25 个项目滚动时，我需要查询接下来的 25 个项目。如何检测用户何时到达列表末尾？ ?

我有一个primeng VirtualScroller，它有一个属性scrollHeight 可以固定一些高度。我试图将值设置为 100%，但它不接受。还尝试向组件添加样式或类以将高度设置为 100%，但也不起作用。如何使高度与浏览器窗口的高度相同？

我有一个包含许多项目的列表，每个项目都可以选择。为此，我使用 Angular Material Virtual Scroll。当一个项目被选中时，被选中的项目被高亮显示，然后被保存在服务器上。当我刷新页面时，所选项目来自服务器并再次突出显示。

我的代码看起来像

问题是，如果选择列表中的一个项目，它会突出显示，但我必须向下滚动到列表才能看到它。当该项目来自服务器时，我想以编程方式向下滚动到它。

我的文档有一种scrollToIndex方法。我在哪里可以找到 的实例FixedSizeVirtualScrollStrategy，所以我可以调用这个方法？

我尝试使用 Hasura 的 GraphQL 后端在 Angular 7 项目上实现无限虚拟滚动。

我无法弄清楚为什么没有添加新数据以及滚动时为什么会有多个 API 请求。

这是组件，feed.component.ts

这是 HTML，feed.component.html

我不确定我做错了什么。我已经按照这个教程

我想在我的 Angular 应用程序上使用虚拟滚动。我列表中的项目是远程分页搜索的结果。每次向下滚动到视口的末尾时，我都想加载更多结果（调用下一页）。

这是我的模板：

这是我尝试使其按需要工作的尝试：

如您所见，我不知道如何触发对我的呼叫nextSearchPage如您所见，仅当滚动条到达列表中当前呈现项目的末尾时，

你知道我该怎么做吗？

Angular 滚动文档很差，并且缺少示例，如本期所述。

我正在使用 angular 7 项目，其中通用集成到它围绕虚拟滚动功能工作，并收到以下错误（用于服务器端渲染）

ReferenceError: window is not defined at new VirtualScrollerComponent (/sample/universal/dist/server.js:150466:23) at createClass (/sample/universal/dist/server.js:26257:20) at createDirectiveInstance ...

关于如何处理这个的任何想法？

我正在寻找一个带有固定标题的工作虚拟滚动表，所以我发现 Cdk 很棒，但文档真的很难理解。目前我正在尝试将 with 结合CdkTable起来CdkVirtualScoll。

我能找到的所有工作示例都使用材料表，但我没有。

那我怎么CdkVirtualScoll去上班呢？这是我到目前为止所做的（来自示例）：

正如文档中所写的那样，表格被包装到滚动视口中。但是我如何以及在哪里设置*cdkVirtualFor现在？

谢谢你的帮助！