当前位置: 首页 > news >正文

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 框架内部机制的理解。

相关文章:

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

问题现象 在使用 Material Table 时&#xff0c;排序功能触发了一个奇怪的 Bug&#xff1a;表格的 Row 无法展开。最终排查发现&#xff0c;问题的根源在于 trackBy 的错误使用。trackBy 方法接受两个参数&#xff1a;index&#xff08;数据索引&#xff09;和 row&#xff08;…...

wlanapi.dll丢失怎么办?有没有什么靠谱的修复wlanapi.dll方法

在遇到各种系统文件错误当中&#xff0c;其中之一就是“wlanapi.dll文件丢失”的问题。这种问题通常发生在Windows操作系统上&#xff0c;特别是当系统试图执行与无线网络相关的任务时。wlanapi.dll是一个重要的系统文件&#xff0c;它负责处理Windows无线网络服务的许多功能。…...

redis安装和使用教程【保姆级】

1.下载 通过网盘分享的文件&#xff1a;redis 链接: https://pan.baidu.com/s/1Tu1KZkf33YJFdul8s6SzqQ?pwd8888 提取码: 8888 2.启动 进入根目录&#xff0c;使用redis-server redis.windows.conf命令启行启动Redis服务&#xff0c; 如下图所示为启动成功&#xff0c;默认…...

Github 2024-12-01 开源项目月报 Top20

根据Github Trendings的统计,本月(2024-12-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10TypeScript项目9Go项目2HTML项目1Shell项目1Jupyter Notebook项目1屏幕截图转代码应用 创建周期:114 天开发语言:TypeScript, Py…...

C总结(C语言知识点,深化重难点)

C语言 1.使用C语言的7个步骤2.ASCII码3.提高程序可读性的机巧4.如何使用多种整形5.打印多种整形6.课移植类型&#xff1a;stdint.h和inttypes.h7.浮点数常量8.浮点值的上溢和下溢9.使用数据类型11.常量和C预处理器12.转换说明的意义12.1转换不匹配13.副作用和序列点14.数组简介…...

[Collection与数据结构] 位图与布隆过滤器

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…...

Redis与缓存

目录 缓存 缓存优缺点 缓存更新策略 超时剔除 先删缓存再更新数据库 旁路缓存(先更新数据库&#xff0c;再删缓存&#xff09; 先更新数据库&#xff0c;再更新缓存 读写穿透 ​编辑 异步缓存写入模式 缓存常见问题 缓存穿透 缓存雪崩 缓存击穿 缓存 在业务开发…...

Ubuntu Linux 文件、目录权限问题(五)

本文为Ubuntu Linux操作系统- 第五弹 此文是在上期文件目录的内容操作基础上接着讲权限问题 上期回顾&#xff1a;Ubuntu Linux 目录和文件的内容操作 文件访问者身份与文件访问权限 Linux文件结构 所有者&#xff08;属主&#xff09;所属组&#xff08;属组&#xff09;其他…...

AI 名人堂:Jeff Dean

Jeff Dean&#xff0c;谷歌的高级研究员和人工智能领域的领军人物&#xff0c;以其在大规模分布式计算系统和人工智能系统的杰出贡献而闻名。 谷歌AI掌门人 TensorFlow项目负责人 美国工程院院士 2AGI.NET AI 名人堂 AI 名人堂&#xff1a;Jeff DeanAI 名人堂&#xff1a;Je…...

基础排序算法详解:冒泡排序、选择排序与插入排序

引言 上一章&#xff0c;我们聊到了排序的基本概念和常见算法的分类。这一次&#xff0c;我们从基础开始&#xff0c;深入剖析三种常见的O(n) 排序算法&#xff1a;冒泡排序、选择排序 和 插入排序。 它们是学习排序算法的入门神器&#xff0c;不仅实现简单&#xff0c;还能帮…...

Flink如何基于数据版本使用最新离线数据

业务场景 假设批量有一张商户表&#xff0c;表字段中有商户名称和商户分类两个字段。 批量需要将最新的商户名称和分类的映射关系推到hbase供实时使用。 原实现方案 a.原方案内容 为解决批量晚批问题&#xff0c;批量推送hbase表时一份数据产生两类rowkey&#xff1a;T-1和…...

什么是反向代理?作用、原理和实例详解

&#x1f680; 什么是反向代理&#xff1f;作用、原理和实例详解 在现代的网络架构中&#xff0c;反向代理&#xff08;Reverse Proxy&#xff09;无处不在。无论是负载均衡、加速缓存&#xff0c;还是WebSocket 支持&#xff0c;反向代理都是必不可少的工具。 这篇文章将带您…...

国产GPU中,VLLM0.5.0发布Qwen2.5-14B-Instruct-GPTQ-Int8模型,请求返回结果乱码

概述 国产GPU: DCU Z100 推理框架&#xff1a; vllm0.5.0 docker容器化部署 运行如下代码&#xff1a; python -m vllm.entrypoints.openai.api_server --model /app/models/Qwen2.5-14B-Instruct-GPTQ-Int8 --served-model-name qwen-gptq --trust-remote-code --enforce…...

Stable Diffusion本地部署:从零开始的完整指南

1、引言 Stable Diffusion是计算机视觉领域的一个生成式大模型&#xff0c;能够进行文生图&#xff08;txt2img&#xff09;和图生图&#xff08;img2img&#xff09;等图像生成任务。它利用深度学习技术&#xff0c;特别是RealisticVision v2.0模型&#xff0c;能够创造出接近…...

隐式神经网络实现低光照图像增强

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

Flutter动画(三)内建显式动画Widget

常见的内建显式动画Widget&#xff1a; ListenableBuilder&#xff1a; AnimatedBuilder AnimatedWidget AlignTransition DecoratedBoxTransition DefaultTextStyleTransition PositionedTransition RelativePositionedTransition RotationTransition ScaleTransiti…...

springSecurity自定义登陆接口和JWT认证过滤器

下面我会根据该流程图去自定义接口&#xff1a; 我们需要做的任务有&#xff1a; 登陆&#xff1a;1、通过ProviderManager的方法进行认证&#xff0c;生成jwt&#xff1b;2、把用户信息存入redis&#xff1b;3、自定义UserDetailsService实现到数据库查询数据的方法。 校验&a…...

Spring Boot日志:从Logger到@Slf4j的探秘

写在前面 Hello大家好&#xff0c;今日是2024年的第一天&#xff0c;祝大家元旦快乐?? 2024第一篇文章从SpringBoot日志开始 文章目录 一、前言二、日志有什么用&#xff1f;三、日志怎么用&#xff1f;四、自定义日志打印 ?? 常见日志框架说明4.1 在程序中得到?志对象【…...

使用 LabVIEW 与 PLC 通信的方式

要将 PLC 与 LabVIEW 或其他 NI 产品进行通信&#xff0c;首先需要明确 PLC 支持的通信协议和接口类型。NI 提供了多种方案&#xff0c;包括 OPC 服务器、Modbus、Ethernet/IP 和其他工业通信协议。下面将详细介绍这些方法&#xff0c;并进行比较分析&#xff0c;帮助你选择最适…...

python录制鼠标键盘操作循环播放

依赖 pip install pynput 程序: from pynput import mouse, keyboard import time import threading# 用于存储录制的鼠标和键盘事件 mouse_events [] keyboard_events []# 定义事件处理函数# 处理鼠标事件 def on_move(x, y):mouse_events.append((move, x, y))def on_cl…...

开发者如何使用GCC提升开发效率Opencv操作

看此篇前请先阅读 https://blog.csdn.net/qq_20330595/article/details/144134160?spm=1001.2014.3001.5502 https://blog.csdn.net/qq_20330595/article/details/144134160?spm=1001.2014.3001.5502 https://blog.csdn.net/qq_20330595/article/details/144216351?spm=1001…...

异常与文件

目录 1.异常 1.1.概念 1.2.常见异常 1.3.异常处理方式 1.3.1.try except 1.3.2.try except else 1.3.3.try except else finally 2.文件 2.1.文件分类 ps&#xff1a;python 程序的数据保存在哪里? 2.2.常见的文件类型 2.3.python 操作文件的函数 2.3.1.读取文件…...

【C语言】完成程序设计填空

文章目录 1、请阅读下面的程序,在空白处填写正确的代码,要求各在一行从头开始输出m和n的值。2、求100~599之间的所有水仙花数,即各位数字的立方和恰好等于该数本身的数。3、以下程序的功能是:将值为三位正整数的变量x中的数值按照个位、十位、百位的顺序 拆分并输出。请填空…...

西湖大学:LLM零样本推理任务校准

&#x1f4d6;标题&#xff1a;Task Calibration: Calibrating Large Language Models on Inference Tasks &#x1f310;来源&#xff1a;arXiv, 2410.18764 &#x1f31f;摘要 &#x1f538;大型语言模型&#xff08;LLM&#xff09;在推理任务上表现出令人印象深刻的零样本…...

windows下Qt5自动编译配置QtMqtt环境(11)

文章目录 [toc]1、概述2、准备1.1 下载源码1.2 配置环境1.3 解释原理 3、编译4、验证5、参考6、视频 更多精彩内容&#x1f449;内容导航 &#x1f448;&#x1f449;Qt网络编程 &#x1f448; 1、概述 Qt默认是不包含mqtt库的&#xff0c;如果需要使用到mqtt库就只能自己编译配…...

每天五分钟深度学习:神经网络的前向传播的计算(多样本)

本文重点 前面我们学习了单样本的前向传播,本文我们学习多样本的前向传播,我们先来回忆一下,神经网络的单样本的前向传播的向量化的方式: m个样本依次进行前向传播 这里我们说明一下符号: 我们使用(m)表示第m个样本,用[m]表示神经网络的第m层 a[2](i) 表示第i个样本计…...

基于 NXP S32K312+FS23 的汽车通用评估板方案

S32K3 系列是 NXP 推出的面向汽车电子和工业应用的微控制器&#xff0c;基于 ARMCortex-M7 内核&#xff0c;支持单核、双核和锁步内核配置。S32K3 系列具有内核、内存和外设数量方面的可扩展性&#xff0c;符合 ISO26262 标准&#xff0c;能达到 ASIL B/D 安全等级&#xff0c…...

11进阶篇:专业课论文阅读方向指南(2025版)

文章目录 第一个检索式:图情档核心期刊(北大 + CSSCI)发文情况研究方法类关键词研究主题类关键词论文阅读建议第二个检索式:川大公共管理学院在核心期刊(北大 + CSSCI)的发文情况研究方法类关键词研究主题类关键词特点关键词与2024年972(现815)两道题目的映射情况815信…...

Qt之第三方库‌QXlsx使用(三)

Qt开发 系列文章 - QXlsx&#xff08;三&#xff09; 目录 前言 一、Qt开源库 二、QXlsx 1.QXlsx介绍 2.QXlsx下载 3.QXlsx移植 4.修改项目文件.pro 三、使用技巧 1.写入数据 2.读出数据 总结 前言 Qt第三方控件库是指非Qt官方提供的、用于扩展Qt应用程序功能的控件…...

第145场双周赛: 使数组的值全部为 K 的最少操作次数、破解锁的最少时间 Ⅰ、使两个整数相等的位数操作、统计最小公倍数图中的连通块数目

Q1、使数组的值全部为 K 的最少操作次数 1、题目描述 给你一个整数数组 nums 和一个整数 k 。 如果一个数组中所有 严格大于 h 的整数值都 相等 &#xff0c;那么我们称整数 h 是 合法的 。 比方说&#xff0c;如果 nums [10, 8, 10, 8] &#xff0c;那么 h 9 是一个 合法…...

AJAX三、XHR,基本使用,查询参数,数据提交,promise的三种状态,封装-简易axios-获取省份列表 / 获取地区列表 / 注册用户,天气预报

一、XMLHttpRequest基本使用 XMLHttpRequest&#xff08;XHR&#xff09;对象用于与服务器交互。 二、XMLHttpRequest-查询参数 语法: 用 & 符号分隔的键/值对列表 三、XMLHttpRequest-数据提交 核心步骤 : 1. 请求头 设置 Content-Type 2. 请求体 携带 符合要求 的数…...

Android期末复习题

1.如何搭建Android开发环境&#xff1f; 答案:搭建Android开发环境需要以下几个步骤&#xff1a; &#xff08;1&#xff09;下载和安装JDK &#xff08;2&#xff09;配置PATH环境变量 &#xff08;3&#xff09;下载和安装Android Studio &#xff08;4&#xff09;创建A…...

《蓝桥杯比赛规划》

一、比赛简介 蓝桥杯全国软件和信息技术专业人才大赛是一项具有较高影响力的编程竞赛&#xff0c;旨在促进软件和信息技术领域专业技术人才的培养&#xff0c;提升高校毕业生的就业竞争力。比赛涵盖了多个编程语言和专业方向&#xff0c;包括 C/C、Java、Python 等。 二、目标…...

三、Zookeeper

Zookeeper 三、Zookeeper3.1什么是zookeeper?3.2为什么需要zookeeper3.3Zookeeper基本运行流程3.4Zookeeper数据模型3.5Zookeeper主要角色3.6Zookeeper工作原理3.7Zookeeper节点数据操作流程三、Zookeeper 3.1什么是zookeeper? ZooKeeper是一个分布式的,开放源码的分布式应…...

Wireshark数据抓包分析之传输层协议(TCP协议)

根据实验环境&#xff0c;本实验的步骤如下&#xff1a; 1.在测试环境使用发包工具和Wireshark抓取TCP三次握手和四次断开的数据包。 2.详细分析TCP协议的三次握手以及四次断开。 任务描述&#xff1a;安装发包工具&#xff0c;并配置TCP客户端&#xff0c;服务端&#xff0…...

用ai做机器视觉的事情

cnn&#xff08;卷积神经网络&#xff09;是典型的ai算法。 我们已经cnn实现像机器视觉中形状匹配的功能&#xff0c;因为使用了roi抠图匹配&#xff0c;所以就叫做roicnn&#xff0c;以区分整图匹配。下面是roicnn笔记总结&#xff1a; 20241022&#xff0c;roicnn搞定&…...

LLM - 开源视觉多模态 LLaVA-CoT(o1) 深度推理模型 测试与源码 教程

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/144304351 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 LLaVA-…...

qtcanpool 知 10:包管理雏形

文章目录 前言痛点转机雏形实践后语 前言 曾听闻&#xff1a;C/Qt 没有包管理器&#xff0c;开发起来太不方便。这是一个有过 node.js 开发经验的人对 Qt 的吐槽。 确实&#xff0c;像 python、golang、node.js 这些编程语言都有包管理器&#xff0c;给用户带来了极佳的开发体…...

[保姆式教程]使用目标检测模型YOLO11 OBB进行旋转目标检测:训练自己的数据集(基于卫星和无人机的农业大棚数据集)

之前写了一个基于YOLOv8做旋转目标检测&#xff08;OBB&#xff09;的文章&#xff0c;内容写得不够好&#xff0c;内容也有些杂乱无序。现如今YOLO已经更新到11了&#xff0c;数据集也集齐了无人机和卫星的农业大棚&#xff0c;所以这次就写一个基于YOLO11 OBB的农业大棚旋转检…...

MySQL 权限管理分配详解

MySQL 权限管理分配详解 MySQL权限系统的工作原理权限表的存取用户通过权限认证、进行权限分配的流程账号管理我们常用的授权all privileges到底有哪些权限呢&#xff1f;以及带来的安全隐患有哪些&#xff1f;创建账户的时候最好分配指定的权限&#xff0c;这样子安全也高管理…...

【期末速成】《微机原理与接口技术》知识点总结

文章目录 前言第一、二章 接口技术概述1. 接口的定义*2. 接口功能特点*3. 接口的分类*4. 接口中的传输信息及其组成5. 接口的编址与译码*6. CPU 与外设之间的数据传送方式* 第三章 总线1. 总线&#xff08;BUS&#xff09;的定义*2. 总线的标准3. 采用标准总线的优点*4. 总线的…...

华为、华三交换机纯Web下如何创关键VLANIF、操作STP参数

华为交换机WEB操作 使用的是真机S5735&#xff0c;目前主流的版本都适用&#xff08;V1R5~V2R1的就不在列了&#xff0c;版本太老了&#xff0c;界面完全不一样&#xff0c;这里调试线接的console口&#xff0c;电脑的网络接在ETH口&#xff09; 「模拟器、工具合集」复制整段内…...

【Elasticsearch】初始化默认字段及分词

1、添加分词插件 1&#xff09;在线安装 执行命令 需要指定相同的版本 bin/elasticsearch-plugin.bat install https://get.infini.cloud/elasticsearch/analysis-ik/7.17.24 2&#xff09;离线安装 将安装包解压到 /plugins 目录下 安装包可以从对应的资源处下载 启动成…...

asdf-java配置

asdf list all java 无结果 asdf list all java 显示结果 No compatible versions available 解决方案 参考 执行 cp ~/.asdf/plugins/java/data/jdk-macosx-x86_64-ga.tsv $TMPDIR/asdf-java-$(whoami).cache/releases-macosx-x86_64.tsv 在此执行 asdf list all java 就可…...

2-2-18-14 QNX系统架构之 TCP/IP 网络

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…...

RabbitMQ延迟消息的实现

RabbitMQ延迟队列的实现 延迟消息是什么延迟消息的实现死信交换机代码实现 延迟消息插件 延迟消息是什么 延迟消息是将消息发送到MQ中&#xff0c;消费者不会立即收到消息&#xff0c;而是过一段时间之后才会收到消息&#xff0c;进行处理。在一些业务中&#xff0c;可以用到延…...

Docker 安装 中文版 GitLab

Docker 安装系列 安装GitLab、解决服务器内存不足问题、使用域名/IP地址访问项目 1、拉取 [rootTseng ~]# docker pull twang2218/gitlab-ce-zh:latest latest: Pulling from twang2218/gitlab-ce-zh 8ee29e426c26: Pull complete 6e83b260b73b: Pull complete e26b65fd11…...

Ubuntu22.04深度学习环境安装【Anaconda+Pycharm】

anaconda可以提供多个独立的虚拟环境&#xff0c;方便我们学习深度学习&#xff08;比如复现论文&#xff09;&#xff1b; Pycharm编辑器可以高效的编写python代码&#xff0c;也是一个很不错的工具。 下面就记录下Ubuntu22.04的安装流程&#xff1a; 1.Anaconda安装 下载Ana…...

springboot整合canal

学习链接 Cannal项目地址 SpringBoot整合Canal实现数据同步到ElasticSearch - 原文地址 Spring Boot整合canal实现数据一致性解决方案解析-部署实战 Java&#xff1a;SpringBoot整合Canal实现数据同步 docker环境安装mysql、canal、elasticsearch&#xff0c;基于binlog利…...

8.在 Vue 3 中使用 OpenLayers 加载天地图示例(多种形式)

前言 OpenLayers 是一个强大的开源地图框架&#xff0c;可以轻松实现地图加载与操作。而 Vue 3 则通过 Composition API 提供了更加简洁和灵活的开发体验。本文将介绍如何在 Vue 3 中结合 OpenLayers 实现对天地图的加载&#xff0c;包括矢量地图、卫星地图以及中文和英文标记等…...