Angular中*ngFor内SVG元素排序后渲染异常问题

嘿，我之前处理过类似的SVG shadow-root在排序后不更新的问题，给你几个实用的解决方案：

1. 给行/图标组件绑定唯一key，强制重新渲染 #

框架（比如Vue、React）的虚拟DOM diff算法会复用相同key的DOM节点，排序后如果用索引当key，其实DOM节点没被销毁重建，导致SVG的shadow-root没更新。你需要给每一行绑定和数据强关联的唯一key（比如数据的ID）：

<tr v-for="item in sortedItems" :key="item.id">
  <td>
    <svg v-if="item.isActive">
      <use xlink:href="#active-icon"></use>
    </svg>
    <svg v-else>
      <use xlink:href="#inactive-icon"></use>
    </svg>
  </td>
</tr>

这样排序后，key对应的元素变化，框架会销毁旧的DOM节点并创建新的，SVG的shadow-root就能正确解析新的图标引用了。

2. 用动态绑定替代条件渲染，直接更新属性 #

不要用两个<svg>标签做切换，而是用单个<svg>动态绑定xlink:href，这样只更新属性而不重建DOM，也能触发shadow-root的更新：

<svg>
  <use :xlink:href="item.isActive ? '#active-icon' : '#inactive-icon'"></use>
</svg>

现代浏览器也可以直接用href属性代替xlink:href，兼容性更好。

3. 手动更新SVG引用（兜底方案） #

如果上面的方法都不适用，你可以在排序完成后，手动遍历DOM更新每个use元素的引用：

// 排序操作完成后执行这段代码
document.querySelectorAll('tr svg use').forEach(useEl => {
  // 找到当前use元素对应的行数据
  const rowItem = getRowCorrespondingItem(useEl.closest('tr'));
  // 更新xlink:href属性
  useEl.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', rowItem.isActive ? '#active-icon' : '#inactive-icon');
  // 现代浏览器可简化为：useEl.setAttribute('href', rowItem.isActive ? '#active-icon' : '#inactive-icon');
});

这个方法比较繁琐，更适合非框架场景。

问题根源 #

排序后框架复用了原有DOM节点，而SVG的use元素的shadow-root是在首次渲染时解析图标的，后续属性变化如果没触发框架的重渲染逻辑，shadow-root就不会同步更新。通过强制重渲染或直接更新属性，就能让shadow-root重新解析图标引用。

内容的提问来源于stack exchange，提问作者Sriram K V