问题标签 [angular-cdk-virtual-scroll]

根据角度虚拟滚动的官方文档 minBufferBx 和 maxBufferPx

假设我们有以下参数：itemSize = 50, minBufferPx = 100, maxBufferPx = 250。当用户滚动浏览内容时，视口检测到只剩下 90px 的缓冲区。由于这低于 minBufferPx，因此视口必须渲染更多缓冲区。它必须至少渲染足够的缓冲区才能返回到 maxBufferPx。在这种情况下，它会渲染 4 个项目（额外的 200 像素）以使总缓冲区大小达到 290 像素，回到 maxBufferPx 之上。

所以我明白，如果我的可见视口高度为 250px，那么虚拟滚动视口将呈现在 350px 和 500px 之间。因此，当我搜索无限滚动支持时，大多数教程都提供了以下代码。

上面的代码我理解的是，如果视口渲染范围结束等于当前检索到的数据长度，那么将请求下一批数据。渲染范围结束等于 minBufferPx 和 maxBufferPx 之间的项目索引。例如，如果内容窗口高度为250px，item高度为50px，firstVisibleIndex在item index 2处，设置minBufferPx=350，maxBufferPx=350，那么根据上面的minBufferPx，渲染的范围end item至少在index处12. 所以如果 end === total，则请求下一批。

但是根据我的实现代码，实际不是这样的。

我的内容寡妇高度是 576px，它可以在可见范围内放置 9 个项目。我监控我的滚动行为并检查下一场比赛日志的请求

我发现 minBufferPx、maxBufferPx 没有按预期工作。FirstVisibleIndex 和 renderRange end 总是相差 9 个项目，即可见窗口高度。所以按照上面的实现，无限滚动的体验并不好。它只在最后滚动到达时请求下一批。

所以我尝试修改我的代码，如下所示，以测试更好的滚动体验。

上面的代码有点像保留 11 个项目的缓冲区，并请求下一批。上面的方法也不好，因为我使用的是常数 20 数字。如果内容窗口更改为放置 21 个项目，则此代码将出现问题。

请问我对minbufferPx和maxBufferPx的理解有没有错？它没有反映在 getRenderedRange().end 中吗？

1. 我在 Angular 11 中使用 cdk-virtual-scroll-viewport 进行虚拟滚动

2. 我想在子表行上显示虚拟滚动，所以我怎样才能只为表行实现，这是我的表和代码的屏幕截图。

我只想为子表行添加虚拟滚动

Angular Materialcdk-virtual-scroll-viewport属性不适用于嵌套*cdkVirtualFor或*ngFor. 视口一分为二，滚动无法按预期工作。请协助在视口中与父母和孩子一起列出。

我在我的 ionic 5.3.3 项目中安装了 CDK Virtual Scroller：

版本是：“@angular/cdk”：“^13.0.2”

滚动视口包含一个 ion-item-group：

视口 css 属性：

当我构建项目时，出现以下错误：

node_modules/@angular/cdk/bidi/directionality.d.ts:22:21 中的错误 - 错误 TS2694：命名空间 '"../User Manual/node_modules/@angular/core/core"' 没有导出成员 'ɵɵFactoryDe​​claration' .

22 静态ɵfac: i0.ɵɵFactoryDe​​claration<Directionality, [{ optional: true; }]>;

这是版本：离子：

离子 CLI：6.16.1 (/usr/local/lib/node_modules/@ionic/cli) 离子框架：@ionic/angular 5.9.1 @angular-devkit/build-angular：0.1001.7 @angular-devkit/schematics： 10.2.3 @angular/cli：10.2.3 @ionic/angular-toolkit：2.3.3

电容器：

电容器 CLI：3.3.2 @capacitor/android：3.3.2 @capacitor/core：3.3.2 @capacitor/ios：3.3.2

效用：

cordova-res（可用更新：0.15.3）：0.15.2 本机运行：1.5.0

系统：

NodeJS：v14.17.0 (/usr/local/bin/node) npm：6.14.15 操作系统：macOS Catalina

我一直在网上搜索，但我不明白错误或如何进一步调试它，任何帮助表示赞赏。

https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn

这是我到目前为止所做的，现在我需要展开/折叠组标题之后的所有 div。

有没有办法暂时阻止 Angular CDKScrollable 组件上的交互？我在屏幕上有一个可拖动的按钮，但移动按钮也会滚动 CDK-virtual-scroll，即使在按钮上的 touchstart 和 touchmove 上启用stopPropagate()并启用。preventDefault()当按钮上的触摸处于活动状态时，我想禁用视口的滚动。

我在 Ng-zorro 的 Angular 项目中使用 cdk 虚拟滚动。我有一个折叠组件列表，在该列表中是我使用虚拟滚动的地方。

问题是当我打开一个折叠时，如果内容大于窗口高度，当我滚动另一个折叠时打开。

我认为它会发生，因为当虚拟滚动加载更多内容时，它会为每个折叠组件提供一个 id，每次滚动时都会更改。但这是一个模糊的想法，我没有找到相关信息。

这是我的 hmtl 列表文件：

这是我的折叠组件：

这是我的 ts 文件：

谢谢大家！<3

我从 HTTP get 调用中获取“incident_ids”列表，如 ts 文件所示，并填充到 mat-nav-list 中的 HTML 中。问题是 cdk-virtual-scroll-viewport 中的 mat-nav-list 没有使用 HTTP 数据进行更新，但是当我删除 cdk-virtual-scroll-viewport 时，mat-nav-list 正在显示数据。

这是我的 HTML 文件

这是我的 ts 文件

这是我在服务文件中的 API 调用

谁能指出我错过了什么？

*ngIf在 cdkVirtualScroll中使用的正确方法是什么？动态使用*ngIf时，cdk 端口的大小保持不变，这会扭曲视图。

我想将 CdkVirtualScrollViewport 与 *ngIf 构造的内部部分一起使用 - 这是我的模板：

最初是 noscroll=false，所以虚拟滚动视图将被渲染并且滚动工作完美，我可以滚动我在表数据源中设置的所有 200 行。我的问题是：在从 virtual-scroll-view 切换到 noscroll-view 并再次切换回 virtual-scroll-view 之后（例如将 noscroll 条件从 false 更改为 true 并返回到 false），cdk-virtual-scroll-viewport 呈现只有“可见”行，并且不提供对表的所有 200 行的完全滚动可能性。我认为，这种行为的原因是，在切换到 noscroll-view 时，CdkVirtualScrollViewport 关闭了他对视口更改的内部订阅：他的内部成员 _viewportChanges.closed=true 并且在切换回虚拟滚动视图后，这个状态仍然存在关闭。

要切换到虚拟滚动视图：我将滚动偏移量重置为 0，设置视图的完整内容大小并设置可见行：

我还应该做什么？

这是我的示例代码的 Stackblitz 链接（请耐心等待，此代码仅用于演示我的问题）：

https://stackblitz.com/edit/cdk-virtual-scroll-viewport-in-ngif?devtoolsheight=33&embed=1&file=src/app/app.component.html

任何帮助将不胜感激 ！