问题标签 [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 投票
0 回答
1046 浏览

angular - 如何使用二维角度虚拟滚动?

我想在可能有很多行和很多列的数据透视表上使用角度虚拟滚动,所以我想在水平和垂直方向上都进行虚拟滚动。

有没有办法用 angular material sdk 来做到这一点,还是我应该自己写?

0 投票
1 回答
349 浏览

angular - 为 Clarity 数据网格行实现 Angular CDK 虚拟滚动

我想实现具有虚拟滚动能力的datarid。我们可以使用 Angular CDK 包来实现 Clarity 数据网格行的虚拟滚动吗?

我尝试在数据网格上添加 CDK Virtual Scroll,如下所示:

但是,数据网格上没有呈现任何内容(数据网格显示空占位符)。如果我删除 CDK 虚拟滚动,则 Clarity 数据网格按预期工作。我们有什么办法吗?

谢谢。

0 投票
2 回答
3306 浏览

css - 在 cdk-virtual-scroll-viewport Angular 之外显示绝对元素

我有一个cdk-virtual-scroll-viewport元素,在这个元素内部我有一个相对定位的 div,里面有一个绝对定位的元素。基本上我希望能够在外部显示绝对定位的项目,cdk-virtual-scroll-viewport但它被切断了......

这是这个问题的堆栈闪电

https://stackblitz.com/edit/angular-kavjsh

组件.html

组件.css

这是怎么回事

在此处输入图像描述

我想要的结果是这样

在此处输入图像描述

各种定位配置都试过了还是不行?

任何帮助,将不胜感激!

0 投票
1 回答
328 浏览

angular - 将现有的 ng-container 树适配为虚拟树

我有一个非常非常裸露的最小树,有时需要渲染成千上万的元素。这会导致一些非常糟糕的性能,因此该网站变得相当滞后。相反,我选择尝试cdk-virtual-scroll-viewport,但我无法让它工作,因为我正在使用ngTemplateOutlet. 例子:

我的root数组看起来有点像这样:

我试着简单地这样做:

所以基本上添加了cdk-virtual-scroll-viewport元素并使用cdkVirtualFor而不是ngFor,但我收到一条错误消息:

没有 CdkVirtualScrollViewport 的提供者

我猜这是一个错误,因为它尚未关闭:https ://github.com/angular/components/issues/15277

知道如何调整我现有的代码吗?我面临的最大问题是隐藏/取消隐藏部分,因为由于ng-container某种原因它无法使用它。

0 投票
1 回答
2081 浏览

angular - Angular CDK 虚拟滚动从列表中删除项目

在 Angular CDK 虚拟滚动中,我使用列表并从按钮将项目添加到列表中,它可以工作。我有另一个按钮来从列表中删除项目,但 UI 没有用删除的内容刷新。

添加到列表

如何从列表中删除项目并刷新视图?

注意:我使用的是不可观察的数据源。

0 投票
1 回答
1349 浏览

angular8 - 排序不适用于虚拟滚动自定义数据源

Angular 8 带来了非常酷的功能来实现虚拟滚动。他们在此处提供了有关其用法的示例。虽然,它真的很难用 mat-table 实现。

我一直致力于在 mat-table 上实现虚拟滚动,发现我们需要有自己的自定义数据源。我通过实现DataSource类创建了新的数据源,但我发现,由于自定义数据源,我失去了排序和其他功能。

app.component.html

app.component.ts

为了实现排序和其他功能,我只是从MatTableDataSource复制了代码。但不知何故,this.sort在任何方法中总是为空。我找不到原因。谁能解释这种行为?

这是可以玩的stackblitz 。

0 投票
0 回答
931 浏览

angular - 表的 cdk-virtual-scroll-viewport 未正确显示搜索结果

我试图对具有大数据大小的表使用虚拟滚动选项。当我使用它时,它会正确显示滚动条。但是由于想要启用搜索,我使用了“table datatable”。但它没有正确显示搜索结果。如何解决问题?


您需要在 IIS 中网站的应用程序池中将加载用户配置文件设置为 true。

如果有的话,还要给它正确的访问 AD 的权限。

在此处输入图像描述

0 投票
1 回答
1948 浏览

angular - Angular:cdk-virtual-scroll + 自动完成 - cdk-overlay-pane 问题

我正在使用带有 mat-autocomplete 的 Angular CDK 的覆盖模块。

场景: 有一个带有cdk-virtual-scroll的mat-autocomplete输入框,下面有两个按钮。使用下拉列表中的值之一预先选择了输入框。

问题: 现在,如果我们从 mat-autocomplete 输入中选择整个文本/双击默认选定的文本,然后点击正下方以再次取消选择该文本(在该按钮上/上方),我将无法单击这些按钮。

调试时分析: 如果我们点击输入,它会打开透明的 cdk-overlay 层,但没有结果。供参考,请参阅随附的 img,以了解我已将叠加背景设置为黄色,因为此叠加我们无法单击按钮。

覆盖在垫子自动完成上

0 投票
0 回答
603 浏览

html - 在 cdk-virtual-scroll-viewport 中按向上/向下导航按钮时滚动不起作用

我在我的垫子自动完成中使用 cdk-virtual-scroll-viewport。使用鼠标滚动时滚动工作正常,但按下 keydown 按钮时滚动不工作。

预期行为:如果焦点超出可见视口,列表应自动向下/向上滚动

实际行为:它只是不滚动,如果到达实际渲染项目的末尾,它会回到开始并且不渲染新项目。

就像在这个链接中:https ://stackblitz.com/edit/angular-5rmvpq

0 投票
1 回答
177 浏览

angular - 虚拟滚动角 - 调整到内容的宽度

我有一个使用虚拟滚动的包含 N 个项目的表。有没有办法让滚动条就在我的桌子边缘。目前滚动条位于屏幕边缘。

我知道我可以为滚动容器设置固定宽度,但这还不够好。

Stackblitz 链接:https ://stackblitz.com/edit/angular-dxkuiu

在此处输入图像描述