Angular cdk滚动:更新视图中未显示的数据源
Angular CDK滚动是Angular的一个扩展库，它提供了一些用于处理滚动行为的工具和指令。CDK是Component Dev Kit的缩写，它是Angular团队提供的一组可重用的组件和工具，用于帮助开发者构建丰富的Web应用程序。
CDK滚动的主要目的是解决在处理大量数据时，当数据源更新时，视图中未显示的数据无法自动更新的问题。它提供了一种机制，可以在滚动容器中动态加载和更新数据，以确保用户能够无缝地浏览和操作大型数据集。
CDK滚动的主要特性包括：
- 虚拟滚动：CDK滚动使用虚拟滚动技术，只渲染当前可见的数据项，而不是全部数据。这样可以大大提高性能和内存利用率。
- 动态数据更新：当数据源发生变化时，CDK滚动会自动检测并更新视图中未显示的数据项，以确保数据的一致性。
- 自定义模板：CDK滚动允许开发者使用自定义模板来呈现数据项，以满足不同的需求。
CDK滚动适用于需要处理大量数据的应用场景，例如数据表格、聊天记录、日志等。它可以提供流畅的滚动体验，并且能够高效地处理大型数据集。
腾讯云提供了一些相关的产品和服务，可以与Angular CDK滚动结合使用，以构建高性能的Web应用程序。其中，腾讯云对象存储（COS）可以用于存储和管理大量的静态文件，腾讯云云服务器（CVM）可以提供可靠的计算资源，腾讯云数据库（TencentDB）可以用于存储和管理应用程序的数据。
更多关于Angular CDK滚动的信息和使用方法，可以参考腾讯云官方文档：
- Angular CDK滚动官方文档：https://angular.cn/cdk/scrolling/overview
- 腾讯云对象存储（COS）产品介绍：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）产品介绍：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）产品介绍：https://cloud.tencent.com/product/cdb
相关·内容
1回答
Angular cdk滚动:更新视图中未显示的数据源
angular、angular-material、angular-cdk、virtualscroll
到目前为止，我之前构建无限滚动条的所有尝试都失败了。我目前正在开发的组件使用Angular的虚拟滚动，并且应该在达到虚拟滚动视区的某个索引时更新数据源。虽然BehaviorSubject确实更新了，但我在视图中看不到新版本。 我的组件如下所示： import {Day, Month, Selected, Weekday} from '.
浏览 27提问于2019-01-04得票数 2
回答已采纳
2回答
如何将位置策略添加到角CDK覆盖层？
angular、angular-cdk
如何将定位策略(ConnectedPositionStrategy)添加到角CDK覆盖层？// ... _
浏览 27提问于2017-12-19得票数 15
回答已采纳
1回答
不同固定大小项的角度虚拟滚动策略
angular、angular-material、angular-cdk、angular-cdk-virtual-scroll
我使用Angular的cdk-virtual-scroll-viewport显示了一个无限的虚拟卷轴。除了订阅视图位置之外，该功能不依赖于它的任何特殊功能，以便在用户滚动到底部时加载新元素(在自定义DataSource<Item>中)：
connect(collectionViewer: CollectionViewer(在css和<cdk-virtual-scroll-viewport>的itemSize中指
浏览 7提问于2021-02-13得票数 5
1回答
使用HTML表格的cdk虚拟滚动
angular、angular-cdk
我对angular非常陌生，已经被这个问题困扰了一天多了。使用Angular 7和angular/cdk 7.3.4版。我想要完成的事情似乎很简单。我有一个很好的旧HTML表，有很多行。我想在屏幕上显示它并启用虚拟滚动(使用cdk- virtual -scroll-viewport)。显示顶部的h1元素，但不显示表本身。它被完全忽略了。我错过了什么，here.Is这是做这
浏览 16提问于2019-03-15得票数 5
回答已采纳
10回答
角材料对话框组件隐藏了我的网站的所有组件
angular、material-design、angular-material
import { Component, OnInit, Inject } from '@angular/core'; moduleId: module.id, templateUrlconsole.log('The dialog was cl
浏览 7提问于2017-12-12得票数 19
1回答
使用Angular Material对话框滚动到对话框顶部
angular、angular-material
使用组件显示两个表单(一个是隐藏的，而另一个是填写的)。提交第一个表单后，它将被隐藏，而第二个表单将显示(在同一对话框中)。问题:当第一个窗体被隐藏而第二个窗体被显示时，滚动位置不会更新(以显示对话框的顶部)，因此用户可以看到第二个窗体的中间或底部。
浏览 0提问于2021-05-18得票数 0
1回答
不使用响应数据的虚拟滚动-cdk-虚拟滚动-视图端口
angular、angular-material、virtualscroll
我无法将cdk虚拟滚动视图端口与我的角度html中的数据绑定。
<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let currentJob of/<
浏览 3提问于2021-03-13得票数 0
1回答
如何使用Socket.io阻止类似事件的滚动？- Angular 7
javascript、angular、sockets、socket.io、angular7
当数组元素更新时，使用Socket.io，然后在角度7中向下滚动页面。请告诉在like事件中如何停止向下滚动页面。
浏览 0提问于2020-08-19得票数 1
5回答
Cdk虚拟滚动问题
angular、angular7、angular-cdk
有没有人遇到过angular 7 cdk虚拟滚动在mat-tab组中不正常工作的问题？我的城市组件模板如下所示
<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx<div class="state">{{state.name}}</d
浏览 1提问于2018-11-08得票数 10
1回答
如何在React本机FlatList (2018)中对列进行右转
react-native、react-native-flatlist
<Text>r{rowIndex}</Text> </View> };此示例将正确滚动以显示视口下面的行，但它不会滚动以显示视区以外的列。如何允许滚动视图以显示FlatList的列？我不认为使用嵌套<
浏览 1提问于2018-04-15得票数 5
2回答
创建不停机的android listview
android、listview、android-listview
由于我获得了大量数据，请告诉我如何将无限滚动添加到我的ListView中。我的意思是，当ListView到达它的末端时，数据应该被自动加载。我在网上搜索，尝试了很多东西，但都不能做我想做的事情。以下是我的代码
StringArrayAdapter
浏览 3提问于2015-10-09得票数 0
2回答
在iOS上折叠Safari导航栏时保持元素不变
css、css-position、mobile-safari
我正在为Jekyll开发一个基于的网站。
(请注意，文本延伸到导航栏的下方。此屏幕截图是在页面处
浏览 24提问于2017-07-05得票数 0
回答已采纳
1回答
在卷轴上重新定位CdkConnectedOverlay
angular-cdk
当单击按钮时，我试图使用CdkConnectedOverlay来显示覆盖。它主要是工作，但覆盖不是重新定位在滚动。我肯定我错过了一些很小的东西，但我无法用我的生命来解决它。我用的是Angular 7.2.8和Angular CDK 7.3.3更新
滚动</
浏览 0提问于2019-06-25得票数 8
回答已采纳
1回答
使用angular-material datatable将数据源与api连接
angular5、angular-material-5
我有一个在angular中提供搜索功能的组件。当用户输入值时，它调用服务代码，服务代码反过来调用POST API，并根据查询检索结果。我想使用angular-material库在表格集合中显示结果。如何将数据源与服务代码连接起来，以便在数据从服务代码到达时更新表组件。以下是我的组件代码import { DataServi
浏览 5提问于2018-08-15得票数 0
1回答
从RecyclerView适配器中删除数据子项，而不影响当前可见的视图
android、android-recyclerview、recyclerview-layout
我正在使用一个回收器视图构建一个无限的水平滚动列表。1-2个孩子可以在任何时候在屏幕上看到(因为他们的宽度大于屏幕视区，所以我们永远不会有超过2个孩子可见)。初始状态：
当用户滚动时(他们可以向前和向后滚动-但对于本例，让我们假设他们正在向后滚动)，我正在获取更多的数据，并且我将它们预先添加到我的适配器数据中。如果这样做，我将从数据源的末尾删除不必要的额外子项，然后调用
浏览 44提问于2018-06-02得票数 1
回答已采纳
1回答
删除行时uitableview数据的平滑重新加载
iphone、objective-c、ipad、uitableview
当一个uitableview滚动到屏幕底部时，我试图重新加载它。我删除前几行，并将更多行添加到底部。在将新闻行添加到uitableview的数据源之前，我调用[tableview reloaddata]方法。这是因为我希望表视图显示先前可见的行。它正确地重新加载数据，但是在表视图中出现了突然的猛增。它闪现，没有提供一个良好的用户体验。所以我的问题是
当删除顶部的几行时，如何更新uitablevi
浏览 2提问于2011-07-06得票数 0
1回答
如何向mean stack应用程序添加动画
javascript、css、animation、mean
我正在设计一个使用MEAN堆栈的网站，虽然有许多教程指导如何使用MEAN堆栈开发web应用程序，但我不确定向您的应用程序添加动画的最佳方法是什么。将动画添加到MEAN应用程序中最通用和最干净的方式是什么，Angular中的ng-Animate是这样做的吗？
编辑:我特别想实现的是一个包装在礼物中的盒子礼物的图像，在它的左边挂着一条丝带。最好的方法是什么，这与MEAN堆栈非常吻合？
浏览 1提问于2016-08-26得票数 0
2回答
是否仅更新可见的DOM元素？
javascript、jquery、performance、dom
我有一个非常繁忙的UI，大量的DOM没有交互(想象一个很长的股票报价列表或投资组合)的持续更新，我开始看到它变慢了，特别是在IE中。它确实显示了JavaScript引擎之间的差异。我只想更新UI中可见的部分。因此，不知何故，我只想更新用户视区中的DOM元素，当用户滚动时，直到滚动停止，我才想对可见的DOM元素执行更新</
浏览 0提问于2011-12-29得票数 2
回答已采纳
1回答
在VC上禁用由导航控制器推送的页面转换
ios、uipageviewcontroller
我有带有三个导航控制器的根页面视图控制器，每个控制器最初导航到使用主表查看控制器。在用户单击该表后，就会有一个segue，它将被推送到另一个VC (带有明细表)。工作很好。但是，我有以下的效果:页面滚动无处不在。只有在表vc中的用户时，我才需要在页面之间滚动。左击详细表vc转到以前的导航控制器，而不是返回主表vc。Upd:我可以通过在数据源前/之后
浏览 0提问于2013-11-13得票数 0
回答已采纳
3回答
Angular Material2 md-select下拉菜单出现在页面底部
angular、material-design、haml、angular-material2、md-select
我目前正在使用Angular 2.4.0应用程序中的Angular Material2 (使用@angular/material: 2.0.0-beta.1)。如果md-select下拉菜单位于页面的右上角(我正在尝试放置的组件位于页面的右上角)，则当您单击箭头查看下拉选项时，它会滚动到页面底部，显示这些选项。这是我的组件(至少是相关的部分-这个应用程序相当大，我注释掉或删除了许多与下拉菜单无关的代码(并删
浏览 55提问于2017-01-29得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
