Angular由一个bug说起之十一:排序之后无法展开 Row

问题现象

在使用 Material Table 时,排序功能触发了一个奇怪的 Bug:表格的 Row 无法展开。最终排查发现,问题的根源在于 `trackBy` 的错误使用。`trackBy` 方法接受两个参数:`index`(数据索引)和 `row`(当前行的数据)。在实现中,我们只使用了 `row` 参数,并返回了 `row.id` 作为唯一标识。但在排序的场景下,这种实现会导致渲染错误。

解决 Bug 的过程

初步排查

因为问题是在排序后出现的,我们最先检查了排序的函数实现。经过反复测试,发现排序逻辑是正确的,Bug 并不是由此引发。

接着,我们怀疑可能是 Material Table 的用法有误,于是对照官方文档检查了表格的用法配置,结果发现一切符合规范,没有发现明显的问题。

尝试解决

为了进一步缩小排查范围,我们尝试调整表格的渲染逻辑,将多个 Row 类型精简为单一类型。

调整前:

<!-- Parent Row -->
<tr mat-row *matRowDef="let row; columns: getColumns(context.columns);" (click)="toggleRow(row, $event)" [ngStyle]="row.style?.row" class="parent-refer"[attr.row-id]="row.id">
</tr><!-- Child Row -->
<tr mat-row *matRowDef="let row; columns: getColumns(context.columns); when: isChildRows;" [@detailExpand]="isRowExpanded(row) ? 'expanded' : 'collapsed'" [ngStyle]="row.style?.row" class="child-refer"[attr.row-id]="row.id">
</tr>

调整后:

<!-- Single Row -->
<tr mat-row *matRowDef="let row; columns: getColumns(context.columns);"  (click)="toggleRow(row, $event)" [ngStyle]="row.style?.row" class="parent-refer"[attr.row-id]="row.id">
</tr>

测试结果

Bug 确实解决了,表格排序后可以正常展开。但我们很快放弃了这个方案,主要基于以下两点考虑:

  1. 影响范围不明确 该组件被多处复用,删除 Child Row 的渲染逻辑可能会导致其他功能异常。
  2. 官方文档推荐 Material Table 官方文档明确建议使用两个 Row(Parent Row 和 Child Row)来实现分层渲染,我们希望尽量遵循最佳实践。

进一步排查

既然调整渲染方式并不符合实际需求,我们决定从渲染问题本身着手,通过浏览器开发工具(Elements 面板)检查实际渲染结果。

在对比分析中,我们发现一个关键问题:

排序后,原本应该渲染为 `Parent Row` 的内容,被错误地渲染为 `Child Row`,导致 `Parent Row` 无法展开。

从根本上看,渲染错误可能由以下几方面引起:

  1. 数据绑定问题
  2. 变更检测问题
  3. 数据顺序和结构问题

定位根因

经过逐一排查,最终发现问题源于 **数据顺序和结构问题**,而引发这一问题的核心是 `trackBy` 的实现。

 在 `trackBy` 函数中,我们返回了 `row.id` 作为唯一标识符,但在排序的过程中,`row.id` 并不能反映数据的新位置,导致 Angular 的变更检测机制无法正确判断哪些 DOM 元素需要更新,从而引发渲染错误。

问题解决

通过修改 `trackBy` 函数,使其返回 `index` 和 `row.id` 的组合来唯一标识每一行,成功解决了这个问题:

trackByRow(index: number, row: any): any {return `${index}-${row.id}`; // 使用索引和ID的组合
}

总结

这个 Bug 的排查和解决过程让我们学到了一些重要的经验:

  1. trackBy 的作用 在 Angular 中,trackBy 用于优化 *ngFor 循环的性能,但使用时需要特别注意其唯一标识符的稳定性,尤其在排序、筛选等动态操作中,标识符必须能够反映数据的新状态。
  2. 分层排查的重要性 遇到问题时,从影响范围较小的模块(如排序函数)逐步向全局(如渲染逻辑和框架机制)排查,可以有效缩小问题范围。
  3. 遵循最佳实践 官方文档推荐的实现方式通常是经过深思熟虑的,应尽量在其基础上进行改进,而非彻底推翻。

通过这次问题的解决,我们不仅修复了 Bug,也加深了对 Angular 框架内部机制的理解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/485292.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL语句学习第三篇_数据库

MySQL语句学习第三篇_数据库 专栏记录MySQL的学习&#xff0c;感谢大家观看。 本章的专栏&#x1f4da;➡️MySQL语法学习 本博客前一章节指向➡️MySQL语句学习第二篇 本人的博客➡️:如烟花般绚烂却又稍纵即逝的主页 文章目录 MySQL的基础操作&#xff08;改与查&#xff0…

代码随想录Day35 本周小结动态规划,动态规划:01背包理论基础,动态规划:01背包理论基础(滚动数组),416. 分割等和子集。

1.本周小结动态规划 周一 动态规划&#xff1a;不同路径 (opens new window)中求从出发点到终点有几种路径&#xff0c;只能向下或者向右移动一步。 我们提供了三种方法&#xff0c;但重点讲解的还是动规&#xff0c;也是需要重点掌握的。 dp[i][j]定义 &#xff1a;表示从…

ceph存储池

1、存储池 1、存储池的概念 存储池就是ceph的逻辑分区&#xff0c;专门用来存储对象的 特点 将文件切片成对象&#xff0c;通过hash算法&#xff0c;找到存储池中的pg&#xff0c;池中的pg根据crush算法找到osd节点 存储中的PG数量对性能有重要的影响&#xff0c;过多和过少…

知从科技闪耀汽车智能底盘大会:共探软件安全新篇章

在汽车科技蓬勃发展的浪潮中&#xff0c;智能底盘技术正成为引领行业变革的关键力量。11月27日-28日&#xff0c;盖世汽车 2024 第四届汽车智能底盘大会盛大召开&#xff0c;上海知从科技有限公司受邀出席此次盛会&#xff0c;与众多汽车领域的精英齐聚一堂&#xff0c;共话智能…

STM32-C语言基础知识

C语言基础知识 stdint.h简介 给寄存器某个位赋值 给位6赋值为1流程&#xff1a;先清0&#xff0c;再赋值 带参数的宏定义 建议使用do {…}while(0)来构造宏定义 条件编译 条件编译后面必须跟宏语句&#xff0c;如#if _LED_H 指针使用常见的2大问题 1、未初始化 2、越界使…

专业140+总分420+上海交通大学819考研经验上交电子信息与通信工程,真题,大纲,参考书。博睿泽信息通信考研论坛,信息通信考研Jenny

考研结束&#xff0c;专业819信号系统与信号处理140&#xff0c;总分420&#xff0c;终于梦圆交大&#xff0c;高考时敢都不敢想目标&#xff0c;现在已经成为现实&#xff0c;考研后劲很大&#xff0c;这一年的复习经历&#xff0c;还是历历在目&#xff0c;整理一下&#xff…

Python 调用 Umi-OCR API 批量识别图片/PDF文档数据

目录 一、需求分析 二、方案设计&#xff08;概要/详细&#xff09; 三、技术选型 四、OCR 测试 Demo 五、批量文件识别完整代码实现 六、总结 一、需求分析 市场部同事进行采购或给客户报价时&#xff0c;往往基于过往采购合同数据&#xff0c;给出现在采购或报价的金额…

MySQL用法---MySQL Workbench创建数据库和表

1. 连接数据库 打开软件&#xff0c;点击左下角卡片&#xff0c;输入设置的数据库密码&#xff0c;勾选单选框 2. 了解主页面的组成部分 3. 创建数据库 先点击工具栏的创建按钮 再输入数据库名称 点击 Apply 创建 4. 创建数据表 展开数据库&#xff0c;在Tables上右键&…

Leecode刷题C语言之可以被进一步捕获的棋子数

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; int numRookCaptures(char** board, int boardSize, int* boardColSize) {int cnt 0, st 0, ed 0;int dx[4] {0, 1, 0, -1};int dy[4] {1, 0, -1, 0};for (int i 0; i < 8; i) {for (int j…

Python、R循环神经网络RNN、指数平滑ETS、ARIMA模型预测网络流量、ATM机取款、旅游需求时间序列数据...

全文链接&#xff1a;https://tecdat.cn/?p38496 分析师&#xff1a;Pengyuan Wen 在当今经济研究与商业决策领域&#xff0c;精准的时间序列预测具有极为关键的意义。社会消费品零售总额作为反映人民消费水平以及国民经济状况的核心指标&#xff0c;其发展趋势的精准把握对中…

第二篇:k8s工作流程

我们来看通过deployment部署pod的常规流程&#xff1a; kubectl向apiserver发送部署请求&#xff08;例如使用 kubectl create -f deployment.yml&#xff09;apiserver将 Deployment 持久化到etcd&#xff1b;etcd与apiserver进行一次http通信。controller manager通过watch a…

DevOps系统设计和技术选型

命名是一件痛苦的事情&#xff0c;除非你不想要一个好名字。 我正在做的这个管理系统叫什么合适&#xff0c;或者是什么类型的系统&#xff0c;想去想来不知所措&#xff0c;后来想想这么小的东西纠结什么&#xff0c;先从小的细节一点点来&#xff0c;能用就行&#xff0c;就用…

大模型基础环境部署之二:安装CUDA(详细实操版)

在完成 Nvidia 驱动的安装之后&#xff0c;接下来进行 CUDA 的安装以及版本确认。 一、安装 CUDA 1、运行 CUDA 安装程序 /mnt/data/Nvidia/CUDA# ./cuda_12.1.0_530.30.02_linux.run在安装过程中&#xff0c;确保不要选择安装驱动&#xff0c;以免覆盖已经安装好的 Nvidia …

在 Ansys Mechanical 中使用命名选择

介绍 在设置模型时&#xff0c;我通常会使用几何选择选项来确定边界条件、载荷、材料属性和模型的其他重要方面的范围。 这对于没有很多面或身体的小模型来说已经足够好了。随着我的模型变得越来越大和越来越复杂&#xff0c;单击确定边界条件和材料属性的范围变得很乏味&…

【Elasticsearch】实现气象数据存储与查询系统

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

精密制造中智能扭矩系统的关键作用

【大家好&#xff0c;我是唐Sun&#xff0c;唐Sun的唐&#xff0c;唐Sun的Sun。】 电子、半导体、医疗器械等精密制造行业对于产品质量和性能的要求达到了前所未有的高度。在这一背景下&#xff0c;智能扭矩系统成为了确保零部件装配高精度和一致性的关键要素&#xff0c;对提升…

使用mtools搭建MongoDB复制集和分片集群

mtools介绍 mtools是一套基于Python实现的MongoDB工具集&#xff0c;其包括MongoDB日志分析、报表生成及简易的数据库安装等功能。它由MongoDB原生的工程师单独发起并做开源维护&#xff0c;目前已经有大量的使用者。 mtools所包含的一些常用组件如下&#xff1a; mlaunch支…

软件测试最新项目合集【商城、外卖、银行、金融等等.......】

项目一&#xff1a;ShopNC商城 项目概况&#xff1a; ShopNC商城是一个电子商务B2C电商平台系统&#xff0c;功能强大&#xff0c;安全便捷。适合企业及个人快速构建个性化网上商城。 包含PCIOS客户端Adroid客户端微商城&#xff0c;系统PC后台是基于ThinkPHP MVC构架开发的跨…

Artec Leo 3D扫描仪 革新家具行业的数字化展示【沪敖3D】

随着科技的飞速进步&#xff0c;三维扫描技术已被广泛应用于包括家居行业在内的多个行业。面对现代消费者对家居产品日益增长的个性化和多样化需求&#xff0c;传统的家居设计和展示方法已难以满足市场需求。三维扫描技术的出现&#xff0c;为家居行业带来了新的发展机遇&#…

爬虫项目基础知识详解

文章目录 Python爬虫项目基础知识一、爬虫与数据分析1.1 Python中的requests库Requests 库的安装Requests 库的 get() 方法爬取网页的通用代码框架HTTP 协议及 Requests 库方法Requests 库主要方法解析 1.2 python中的json库1.3 xpath学习之python中lxml库html了解html结构html…