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

我想阻止滚动条在 cdk-virtual-scroll 中默认移动？有办法吗？我一直在研究很多，但没有找到一种方法来做到这一点。

当我滚动到滚动查看器的底部时，最后几个项目被切断。

我正在使用实验性 cdk 并使用 autoSize。

该网站就在这里；https://lucid-thompson-158d2d.netlify.app/

堆栈闪电战；https://stackblitz.com/github/weirdyang/movie-therapy-angular（请注意，由于 scss 导入，它似乎不起作用）；

我究竟做错了什么？

在此处输入图像描述

我在 .html 文件中有这段代码，它只是循环通过 formArray 控件并显示一个组件。formArray 的长度默认为 1，并且可以随时间增加或减少。我希望项目大小是可变的或自动的。请帮助我找到一种方法来做到这一点。

我们正在使用 Angular 10.0.9。我只是尝试将虚拟滚动添加到页面并遵循官方文档：

1. ScrollingModule在 app.module.ts 中导入

2. 添加cdk-virtual-scroll-viewportwith anitemSize并添加 a*cdkVirtualFor以迭代数组

3. 浏览器记录以下异常（尝试使用不同的浏览器）：

你们知道我错过了什么吗？我搜索了很多都没有成功，每个示例都遵循上述步骤。

更新 package.json

如果 cdk-virtual-scroll 默认使用 隐藏display:none，则再次显示时仅显示 4 个项目。

我做了一个简单的Stackblitz来重现这个错误。如果将hideCdkVS变量的值更改为falsein virtual-scroll.component.ts，则可以正常工作。

你知道任何解决方法吗？

我正在尝试在我的聊天应用程序中使用 cdk-virtual-viewpoint。可悲的是，它没有渲染任何东西。当我尝试使用普通的“ngfor”时，它工作正常。但是当我使用 cdkVirtualfor 时，它不会显示任何内容。请参阅下面的代码以获取更多详细信息。

请让我知道我做对了什么。相信我，但聊天记录确实有数据。我已经检查过了。

我有一个包含在cdk-virtual-scroll-viewport中的表格组件。列单元格之一包含

'..更多的'

扩展整行的选项。但是当向上/向下滚动时，由于滚动视口的性质，该行会折叠（用户希望它保持展开）。我通过添加解决了这个问题display: contents。

但这改变了弹出组件在表格内的定位（顶部，左侧排列），因为我们将CdkVirtualScrollViewportas传递@INPUT给弹出组件以计算显示弹出窗口的位置（顶部，底部，左侧，右侧）

我看到CdkVirtualScrollViewport.nativeElement.getBoundingClientRect()回来了

DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, ...}

设置时display:content。

谁能告诉我为什么它返回“0”

我在cdk-virtual-scroll-viewport中有一个cdk-table。包含文本内容的单元格，最大文本长度为 1000 个字符。所以我使用它修剪它并在它旁边放置一个按钮，这样当点击时会显示一个带有全文的弹出窗口。text-overflow:ellipse

我看到弹出窗口与 cdk-virtual-scroll-viewport 重叠。我试图z-index为弹出 div和cdk-virtual-scroll-viewport设置它，但它不起作用。

有没有其他方法可以将弹出窗口向前推进？

这是代码，

CSS

html,

我找到了许多使用cdk-virtual-scroll-viewport.

我已经BehaviorSubject根据本教程和其他一些教程使用数据流实现了这一点，但我想不出任何方法让它加载我初始化它的前 10 个项目之后的任何内容。collectionViewer似乎并不在乎我有比我初始化它的更多的项目，而且它也没有BehaviorSubject任何我可以指定长度的成员。

这似乎是一件非常基本的事情（除非您要进行无限滚动，但即使那样我也看不到您如何通知视口还有更多项目），但除了一些告诉我预先初始化 10,000 个项目数组的教程（这不会破坏动态加载项目的目的吗？），似乎没有人关心滚动到先前获取的项目的末尾。

是什么赋予了？

我目前有一个用例，我想扩展 CdkVirtualScrollViewport 组件，以便可以访问其呈现的模板。

具体情况是基本模板呈现<div #contentWrapper class="cdk-virtual-scroll-content-wrapper">包装<ng-content>传递的 a 。我想有一种方法可以在此标头之外传递额外的内容，为此，我想扩展组件以拥有自己的模板。

不幸的是，它并没有开箱即用，经过多次尝试我就放弃了。最新状态为：

我遇到的错误是：

在这一行：this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;

所以_contentWrapper是未定义的，但我不知道为什么要扩展组件的内部功能。

也许有人可以分享这个话题？