首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular cdk滚动:更新视图中未显示的数据源

在 Angular CDK 中使用滚动虚拟化(例如 cdk-virtual-scroll-viewport)时,您可能会遇到需要更新视图中未显示的数据源的情况。以下是一些步骤和示例,帮助您在使用 Angular CDK 的虚拟滚动时更新数据源。

1. 确保正确设置虚拟滚动

首先,确保您已经正确设置了虚拟滚动。以下是一个基本的设置示例:

代码语言:javascript
复制
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <cdk-virtual-scroll-viewport *cdkVirtualFor="let item of items">
    <div class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>

2. 更新数据源

当您需要更新数据源时,您可以直接修改数据源数组,并确保 Angular 的变更检测能够检测到这些变化。以下是一个示例组件:

代码语言:javascript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 1000 }).map((_, i) => `Item #${i}`);

  // 更新数据源的方法
  updateItems() {
    // 例如,添加新项
    this.items.push(`Item #${this.items.length}`);
    // 或者替换整个数组
    // this.items = [...this.items, `Item #${this.items.length}`];
  }
}

3. 使用 ChangeDetectorRef

如果您发现更新数据源后视图没有更新,您可以手动触发变更检测。您可以通过注入 ChangeDetectorRef 来实现这一点:

代码语言:javascript
复制
import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items = Array.from({ length: 1000 }).map((_, i) => `Item #${i}`);

  constructor(private cdr: ChangeDetectorRef) {}

  updateItems() {
    this.items.push(`Item #${this.items.length}`);
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

4. 使用 trackBy 函数

在使用 *cdkVirtualFor 时,您可以使用 trackBy 函数来优化性能并确保正确更新视图。trackBy 函数可以帮助 Angular 跟踪每个项目的身份,从而减少不必要的 DOM 操作。

代码语言:javascript
复制
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items; trackBy: trackByFn" class="example-item">
    {{item}}
  </div>
</cdk-virtual-scroll-viewport>
代码语言:javascript
复制
trackByFn(index: number, item: any): number {
  return index; // 或者返回唯一标识符
}

5. 处理异步数据

如果您的数据源是异步获取的(例如从 API),确保在数据加载完成后更新数据源,并在更新后调用 detectChanges()

代码语言:javascript
复制
import { Component, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
  items: any[] = [];

  constructor(private http: HttpClient, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.http.get<any[]>('your-api-url').subscribe(data => {
      this.items = data;
      this.cdr.detectChanges(); // 确保视图更新
    });
  }
}
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

Operation Byelog 更新 我们之前分享 Angular 路线图中有一个项目是 Operation Byelog,其中我们投入了大量工程努力,设法对问题和 PR 进行分类,直到我们对更广泛社区需求获得清晰认识为止...有关这些 API 和其他新特性更多细节和示例,请务必查看 Angular Material Test Harnesses 文档: http://material.angular.io/cdk/test-harnesses...现在,语言服务将能够像 TypeScript 编译器一样,正确地推断模板中泛型类型。例如,在下面的屏幕截图中,我们可以推断出迭代器类型为字符串。...输入表单数据以及滚动位置都会保持原样,从而提高了开发人员工作效率。 更快构建 通过对一些关键领域所做更新,我们带来了更快开发和构建周期。...请务必检查一下相关内容,确保你使用是最新 API,并遵循我们建议最佳实践。 路线图 我们还更新了路线图,帮助大家了解我们当前优先事项。这篇文章中一些公告是路线图中正在进行项目更新

3.3K30

Angular 6正式版发布,都有哪些新功能

除此之外,这次更新还包括框架包(@angular/core、@angular/common、@angular/compiler 等)、Angular CLI、Angular Material + CDK...Angular Material + CDK 组件 最值得一提是用于显示分层数据树形控件,遵循数据表组件模式,CDK 包含树核心指令,而 Angular Material 则提供与顶层 Material...Angular更新了徽章(badge)和底部菜单栏组件,徽章用于显示小而有用信息,例如未读信息数量。...目前,@angular/cdk/overlay 软件包是 CDK 最强大基础架构之一,你可以利用他们来构建自己 UI 库。...更新通常遵循 3 个步骤,请使用新 ng update 工具: 更新 @ angular / cli; 更新 Angular 框架包; 更新其他依赖包。

4.2K20
  • Angular 6新特性介绍

    通过ng add可以更加容易向项目中添加新功能(类似npm install ) Angular Material+CDK组件 angular6最大补充是用于显示分层数据新树组件。...遵循数据表组件模式,CDK包含核心树指令,而Angular Material则提供与顶层Material Design样式相同体验 Material 运行命令,添加Material ng add...这也就意味着你可以从你应用中移除 polyfill,这样可以减少大约47k空间 RxJS v6 Angular已经更新使用了RxJS v6。...之前我们宣布只有v4和v6是LTS版本,但为了从一个主要版本更新到下一个主要版本更容易,并给更大项目更多时间来规划更新,我们决定将延长对所有主要版本长期支持从v4开始。...更新通常遵循3个步骤,并将利用新ng update工具。 更新@ angular / cli 更新Angular框架包 更新其他依赖项 Ivy Ivy将会是下一代渲染引擎,现在正在开发中。

    2.3K21

    Ng-Matero v15 正式发布

    前言 Angular 按照既定发版计划在 11 月中旬发布了 v15 版本。推迟了一个月(几乎每个版本都是这个节奏),Ng-Matero 也终于更新到了 v15。...具体效果如下图所示: 在线体验地址 焦点管理属于 a11y 范畴,使用 Angular Material 可以很轻松完成 a11y 需求,同时 Angular CDK 中也有 A11yModule...但是我并没有借助 CDK 来实现侧边栏导航聚焦,只是使用了原生 HTML 标签,具体方法不在此赘述,感兴趣小伙伴可以留言咨询。...直接使用 ng update 升级的话,所有引用组件都会自动改为 legacy 组件,所以并不会出现 break changes,但是 legacy 组件都被标记为 deprecated(会显示中划线...停止更新 Angular Flex-Layout 万万没想到 Angular Flex-Layout 竟然不再更新到 v15,虽然早就知道一直处于 beta 版本 Flex-Layout 会在某个版本发生重大变化

    5.5K40

    移除 View Engine 转用 Ivy,盘点Angular 12重要更新

    为了确保 Angular 能够提供良好类型检查、快速侦测变更,Angular 官方团队一直在调整静态检查和动态构建平台。...其它更新亮点 除了移除 View Engine,Angular 12 发行版中还包括其他新功能与重要改进: 为了提高编译器 CLI 性能,若存在重新定向源文件,新版本允许进行增量编译。...Angular CDKAngular Material 共同开放新 Sass API 接口,可供您通过新 @use 语法进行使用。...在更新Angular 12 之后,应用会通过 ng update 进行更新并自动切换为新 API。 提供相关工具,可使用最新算法将旧版本地化 ID 迁移为新 ID。...在动画方面,当用户删除 root 视图时,现在可以正确删除其中 DOM 元素。这是一项重大变化。 为了提高性能,新版本删除了 DomAdapter 中多种使用方法。

    4.4K10

    懒加载 React 长页面 - 动态渲染组件

    背景 长页面在前端开发中是非常常见。例如下图中电商首页,楼层数据来自运营人员在后台配置,楼层数量是不固定,同时每个楼层可能会依赖更多翻页数据。...Loading 组件是否在视图内 如图 1 所示,当 loading 组件位置滚动到视图中时,并且如果此时还有渲染组件,这时便是渲染下一屏时机。...Element.scrollHeight 元素内容高度度量,包括由于溢出导致图中不可见内容。...Element.getBoundingClientRect() 方法返回元素大小及其相对于位置。...这意味着,在窗口滚动过程中,我们反复更新了 compList 数据,从而导致了楼层组件重新渲染,而每个楼层组件数据请求,是放在组件内部,这与该楼层唯一标识 uuid 相关,因此导致数据接口重复请求

    3.5K20

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    直接从触摸栏运行,构建和调试项目,提交更改并更新项目。IntelliJ IDEA按钮显示在Touch Bar界面中间应用程序特定区域中,它们取决于上下文或您按下修改键。...- 查找使用代码您现在可以使用新代码覆盖功能在客户端找到使用JavaScript代码(或TypeScript代码)。...有关文件和文件夹覆盖范围信息将显示在“ 项目”视图中。...- 与Angular CLI新集成在IntelliJ IDEA 2019中,由于与ng add集成,您可以为Angular应用程序添加新功能。...- 新SQL格式化程序现在可以专门为每个数据源使用自定义代码样式方案。您可以在数据源属性“ 选项”选项卡中指定代码样式方案。

    4.7K30

    vue 虚拟列表实现

    Vue 虚拟列表实现依赖于一些关键技术,包括虚拟滚动、缓存池和动态渲染。 虚拟滚动是 Vue 虚拟列表核心技术之一。它通过仅在屏幕上显示可见部分列表项,而不是整个列表来减少渲染所需时间和资源。...这可以使用 window 对象 innerHeight 或 innerWidth 属性来完成。 计算当前视图中需要渲染列表项。这可以根据当前滚动位置和列表项高度或宽度来计算。...div> export default { data() { return { items: [...], // 数据源...当用户滚动时,列表会动态地更新,以显示当前可见区域列表项。在实现中,我们使用了一个计算属性 visibleItems 来计算当前视图中需要渲染列表项,并使用 v-for 指令来动态地渲染它们。...我们还使用一个监听滚动事件方法 onScroll 来更新可见区域起始索引,从而更新图中显示列表项。 总之,Vue 虚拟列表是一种优化大型列表渲染性能技术。

    25110

    AngularDart Material Design 输入 顶

    showCharacterCount bool  即使maxCount为null,也显示字符数。 showHintOnlyOnFocus bool 输入聚焦时是否显示提示文本。...超过maxRows任何内容都会导致输入滚动。 required bool  是否需要输入。 如果没有输入文本,则必需输入将在第一次失去焦点时显示验证错误。...enforceSpaceConstraints bool  弹出窗口是否应根据相对于可用空间自动重新定位自身。 error String  显示错误。...showHintOnlyOnFocus bool  输入聚焦时是否显示提示文本。 默认为false。 showPopup bool 用于控制建议弹出窗口可见性。...Accessor始终设置从输入设置原始String值,但仅在可以解析输入时设置Control值。 keypressUpdate属性在每个按键上都有值更新,而默认值是仅在模糊事件上更新值。

    5.3K40

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    更新会影响到dom,所以应该在数据更新从而使得dom更新完成后再调用initSwiper方法。...angular脏检测机制是基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...数据正确应用 对比上一节实际效果图,会发现这里只显示了两个图片,什么原因呢?

    1.4K20

    关于虚拟列表,看这一篇就够了

    区域) 监听滚动事件根据滚动位置动态改变可视列表 监听滚动事件根据滚动位置动态改变空白填充 固定高度 列表项高度固定的话,就无需每次都计算当前应该渲染多少条数据,数据量始终是固定,只需要通过用户滚动距离...核心步骤 1.根据容器高度,计算出所需要渲染列表项数,以及初始化列表高度 计算条数时,注意要使用Math.ceil(),而不是floor()   // 可视区域最多显示条数   const limit...,不然会出现滑动到空白占位区域情况      * 因为间隔时间过长的话,太久没有触发滚动更新事件,下滑就会到padding-bottom空白区域      * 电脑屏幕刷新频率一般是60HZ,渲染间隔时间为...当用户滚动时,我们需要一直更新这个缓存数组中列表项信息,目的是下次计算就能使用列表项真实高度和位置,从而准确渲染出列表项。...并且需要注意是,不只是需要更新图中列表项,还需要更新之后所有列表项 // 每次滚动,都去更新缓存数组中dom高度和位置   useEffect(     function () {

    3.8K32

    基于React与Redux留言墙实现

    每次都需要返回一个新对象或者数组,而不能再原有数据上进行修改,从而避免数据更新后组件不更新问题。...Server server端返回数据为一次性数据,即数据取过后就不会再返回,因此需要在前端Reducer里面对数据进行存储。由于数据为滚动显示,因此需要一个队列来进行控制。...节点删除功能 由于在留言墙使用过程中,会有不断节点产生并且滚动口,因此为了节省内存,需要将滚动节点删除,从而避免整个网页消耗内存越来越大。...由于滚动方式确定为transform滚动方式,因此选择了在请求调用返回数据后同时触发删除代码,对当前消息节点进行判断,对已经滚动口外数据节点进行删除,并重置transform值,从而达到删除节点目的...不足 如果消息并发数量较多,会导致消息堆积在口下方等待向上滚动,由此可能消耗大量内存,后续仍然需要优化,避免所有接受到展示数据都渲染出来堆积在下方。

    2.1K10

    页面滚动,元素跳动;附带jquery.scrollex.js插件

    在现在大多数网站开发中,都有很多动画效果。 有些动画是页面一加载就要,还有一些动画是需要页面滚动到那个元素才要展示。...页面加载时动画效果: 1) 页面加载完成后,给body元素添加class: on-loading, 需要实现动画元素在body.on-loading 状态下显示为:opacity:0(需要显示出来元素...:实现元素显示或移动 显示显示+移动: 2....滚动到要实现动画元素时(is-inactive): 其实和上面的意思一样: 在滚动到该元素时,显示假位置。...· terminate:当unscrollex()方法在某个元素上调用时触发,它作用是撤销前一个scrollex()调用。 · scroll:在某个元素滚动通过口时触发。

    5.7K10

    js获取各种距离和宽高

    以浏览器窗口(口)左上角为原点, 距离口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口(口)左上角为原点, 距离口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角为原点..., 距离页面顶部距离, 随页面滚动而改变 pageY 以整个页面的左上角为原点, 距离页面左侧距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部距离 screenY...以计算机显示屏屏幕左上角为原点, 距离屏幕左侧距离 元素宽高及各种距离 宽高 属性 说明 clientHeight/clientWidth 包括元素可视部分高度/宽度包括width/height.../scrollWidth 这个只读属性是一个元素内容高度度量,包括由于溢出导致图中不可见内容。...此属性可以获取或者设置对象最顶部到对象在当前窗口显示范围内顶边/左侧距离,也就是元素滚动条被向下/向右拉动距离。

    23110

    独家 | 手把手教数据可视化工具Tableau

    创建一个不包含混合值新列。 字段类型 连接到新数据源时,Tableau 会将该数据源每个字段分配给“数据”窗格“维度”区域或“度量”区域,具体情况字段包含数据类型而定。...但是存在以下例外: 如果解聚整个视图,则不会根据定义来聚合视图中字段。如果您使用是多维数据源,则会在数据源中聚合字段,但视图中字段不显示该聚合。...在此视图中,您只能看到中部地区数据。向下滚动以查看其他区域数据。 在中部区域,复印机显示为利润最高子类,而装订机和电器则是利润最低。 STEP 6:单击“标记”卡上“颜色”以显示配置选项。...如果选择“使用完整颜色范围”,则 Tableau 会按 -100 到 100 这样范围分配颜色浓度,因此零两侧颜色浓度变化相同。这样,您图中颜色对比度将会更加鲜明。...现在您视图是完整: STEP 11: 使用视图右侧滚动条来检查不同地区数据。 生成填充气泡图 使用填充气泡图可以在一组圆中显示数据。维度定义各个气泡,度量定义各个圆大小和颜色。

    18.9K71

    如何使用纯前端控件集 WijmoJS 中可视化在线设计器

    提供了一个可视界面,用于创建和编辑表示WijmoJS 纯前端控件Angular标记。...注意:设计图面上所有纯前端控件均以设计模式显示,这意味着您无法直接对其进行滚动,调整大小或以其他方式操作,而是使用页面右侧“属性”窗格来操作控件对象模型。...请注意,设计器不会从源视图中保存HTML恢复状态,只能从设计视图中保存JSON恢复。 使用图表 现在让我们考虑一个更复杂例子。...在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现链接。...请注意,它具有latestPrice绑定值,对应于数据源实际字段名称。 name属性(在图表图例中显示)具有适当大小写和单词之间空格。

    5.9K20
    领券