问题标签 [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.
angular - 如何使用二维角度虚拟滚动?
我想在可能有很多行和很多列的数据透视表上使用角度虚拟滚动,所以我想在水平和垂直方向上都进行虚拟滚动。
有没有办法用 angular material sdk 来做到这一点,还是我应该自己写?
angular - 为 Clarity 数据网格行实现 Angular CDK 虚拟滚动
我想实现具有虚拟滚动能力的datarid。我们可以使用 Angular CDK 包来实现 Clarity 数据网格行的虚拟滚动吗?
我尝试在数据网格上添加 CDK Virtual Scroll,如下所示:
但是,数据网格上没有呈现任何内容(数据网格显示空占位符)。如果我删除 CDK 虚拟滚动,则 Clarity 数据网格按预期工作。我们有什么办法吗?
谢谢。
css - 在 cdk-virtual-scroll-viewport Angular 之外显示绝对元素
我有一个cdk-virtual-scroll-viewport
元素,在这个元素内部我有一个相对定位的 div,里面有一个绝对定位的元素。基本上我希望能够在外部显示绝对定位的项目,cdk-virtual-scroll-viewport
但它被切断了......
这是这个问题的堆栈闪电
https://stackblitz.com/edit/angular-kavjsh
组件.html
组件.css
这是怎么回事
我想要的结果是这样
各种定位配置都试过了还是不行?
任何帮助,将不胜感激!
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
某种原因它无法使用它。
angular - Angular CDK 虚拟滚动从列表中删除项目
在 Angular CDK 虚拟滚动中,我使用列表并从按钮将项目添加到列表中,它可以工作。我有另一个按钮来从列表中删除项目,但 UI 没有用删除的内容刷新。
添加到列表
如何从列表中删除项目并刷新视图?
注意:我使用的是不可观察的数据源。
angular8 - 排序不适用于虚拟滚动自定义数据源
Angular 8 带来了非常酷的功能来实现虚拟滚动。他们在此处提供了有关其用法的示例。虽然,它真的很难用 mat-table 实现。
我一直致力于在 mat-table 上实现虚拟滚动,发现我们需要有自己的自定义数据源。我通过实现DataSource
类创建了新的数据源,但我发现,由于自定义数据源,我失去了排序和其他功能。
app.component.html
app.component.ts
为了实现排序和其他功能,我只是从MatTableDataSource复制了代码。但不知何故,this.sort
在任何方法中总是为空。我找不到原因。谁能解释这种行为?
这是可以玩的stackblitz 。
angular - Angular:cdk-virtual-scroll + 自动完成 - cdk-overlay-pane 问题
我正在使用带有 mat-autocomplete 的 Angular CDK 的覆盖模块。
场景: 有一个带有cdk-virtual-scroll的mat-autocomplete输入框,下面有两个按钮。使用下拉列表中的值之一预先选择了输入框。
问题: 现在,如果我们从 mat-autocomplete 输入中选择整个文本/双击默认选定的文本,然后点击正下方以再次取消选择该文本(在该按钮上/上方),我将无法单击这些按钮。
调试时分析: 如果我们点击输入,它会打开透明的 cdk-overlay 层,但没有结果。供参考,请参阅随附的 img,以了解我已将叠加背景设置为黄色,因为此叠加我们无法单击按钮。
html - 在 cdk-virtual-scroll-viewport 中按向上/向下导航按钮时滚动不起作用
我在我的垫子自动完成中使用 cdk-virtual-scroll-viewport。使用鼠标滚动时滚动工作正常,但按下 keydown 按钮时滚动不工作。
预期行为:如果焦点超出可见视口,列表应自动向下/向上滚动
实际行为:它只是不滚动,如果到达实际渲染项目的末尾,它会回到开始并且不渲染新项目。
angular - 虚拟滚动角 - 调整到内容的宽度
我有一个使用虚拟滚动的包含 N 个项目的表。有没有办法让滚动条就在我的桌子边缘。目前滚动条位于屏幕边缘。
我知道我可以为滚动容器设置固定宽度,但这还不够好。
Stackblitz 链接:https ://stackblitz.com/edit/angular-dxkuiu