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

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1930 浏览

angular - 具有引导响应式设计的角度虚拟滚动

我将如何使用引导响应式设计设置 Angular 虚拟滚动?

例如:

所以基本上图像彼此相邻水平加载并包裹视口并调整视口大小将改变列的大小。

我找到了 ngx-virtual-scroller ( https://github.com/rintoj/ngx-virtual-scroller/issues/321 ) 和 cdk 滚动 ( https://material.angular.io/cdk/scrolling/overview ) 但是似乎他们要求每个项目都在一行上。

0 投票
1 回答
1700 浏览

angular - 如何在材质树大子级别上实现虚拟滚动

我有一个具有父级、子级和孙级的角垫树。在点击孩子时,我在其中添加孙子。但是孙子拥有高达 4k 记录的大量数据。这使树变得非常缓慢。我的代码如下

请注意我在 stackblitz 中尝试过的内容:我的代码

我已经注意到虚拟滚动将是这种情况下的最佳解决方案。我看到了一个例子:参考

但在示例中,它具有virtual-scroll完整的数据源的整个树级别。

如何一次添加 10 个元素的孙级虚拟滚动。所以它不会冻结 DOM 和 Tree。请指导我...

0 投票
3 回答
1559 浏览

angular - 如何在虚拟滚动中回到数据集的同一部分?

有一种优化大型数据集渲染的奇妙模式,称为虚拟滚动。在这种特定情况下,我使用 Angular Material CDK api 的https://material.angular.io/cdk/scrolling/overview来获得该行为。但是,当用户导航到不同的页面并返回时,我有一个要求,用户应该在她离开的那个特定位置(例如导航到项目 3498 的详细信息,返回时应该从项目 3498 而不是项目 1 开始)。实现这一目标的最佳方法是什么?

0 投票
1 回答
6125 浏览

angular - 角度虚拟滚动重置到顶部

在我的Angular应用程序中,我使用了 Angular cdk 中的Virtual Scroll

这是我的组件的模板:

在我的组件类中,我有一个方法可以更改items赋予它新内容的数组。每次调用此方法时,数组的大小都会改变:

调用该方法后reload,项目数组被正确更新,并且视图反映了这一变化。但是,滚动不会回到顶部。

每次items更改数组时,我都希望虚拟滚动以重置顶部的滚动。

0 投票
2 回答
3768 浏览

css - cdk-virtual-scroll-viewport 在 Firefox 63.0 版上隐藏滚动条

我想隐藏 cdk-virtual-scroll 元素的滚动条但找不到方法。这是我到目前为止所做的,但它不适用于 Firefox。在铬中工作正常。

这是我的 css 文件

这是我的 html 文件

0 投票
1 回答
850 浏览

angular - 如何在 Angular 8 中使用带有 DragAndDrop 的滚动条

我使用正确的拖放创建了一个应用程序,但是当用户在 10 个项目之后添加项目时,拖动增长太多,您看不到其他项目

此应用程序用于从动态模块中选择顺序,该应用程序使用角度 8(从角度 6 更新)我尝试使用虚拟滚动,但使用拖放时出现错误

0 投票
1 回答
1193 浏览

angular - Angular 6 7 8 - 拖放 + 虚拟滚动 + Observable

我需要让拖放与虚拟滚动一起使用。我的 VS 的数据源是可观察的。我试过这段代码,但它不起作用,VS列表没有变化,只是动画:

这是我的 ts 处理程序:

如何使用 Observable 列表实现 d&d?

0 投票
1 回答
253 浏览

angular7 - 虚拟滚动角7内的单选按钮选择多个单选按钮

我正在使用角度 7 的虚拟滚动功能。我正在尝试在虚拟滚动条内添加输入类型单选。因此,当我们进行滚动时,会选择多个单选按钮。任何帮助表示赞赏。

0 投票
1 回答
1396 浏览

angular - 更改项目数组时 cdk-virtual-scroll-viewport 出错

我在虚拟滚动中有一个项目(产品)列表,当我更改数组的项目时会出现问题。

例如:

最初我在卷轴中有 100 个项目。

然后我运行一个函数“reloadItems()” ,将 100 个项目更改为 4 个项目。

如果我以前向下滚动,它工作正常。

否则,虚拟滚动只显示视图中可见的项目而不显示其他项目(在我的情况下,它只显示 2 个项目而不是 4 个)

正如您在下一张图片中看到的,卷轴的底部没有显示任何产品。

在此处输入图像描述

CSS

我想显示所有项目,当我将数组从 100 个项目更改为 4 个项目时,我需要滚动显示 4 个项目。

提前致谢

0 投票
1 回答
1553 浏览

angular - CDK 无限滚动结束检查

我试图实现无限滚动以在用户向下滚动列表时动态地将项目加载到列表中,但是当我访问 end 和 total 时,它是一样的,我需要检查是否到达最后一个项目然后追加新的列表中的项目。问题是 end 和 total 都是相同的,并且每次都会触发

HTML

TS

Stackblitz 链接 https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv