为<td>标签动态设置data-order属性实现自定义排序时触发G0303错误的问题

我来帮你搞定这个自定义排序的问题，先理清楚错误根源再给你解决方案：

错误原因分析 #

你碰到的G0303: Can't bind to 'order' since it isn't a known property of 'td'报错，本质是Angular的属性绑定规则导致的：框架会把data-order解析成试图绑定<td>元素的order原生属性，但<td>本身并没有这个原生属性，所以直接报错。而硬编码能正常工作，是因为此时Angular只是把它当成普通HTML属性渲染，没有触发属性绑定逻辑。

正确的动态绑定写法 #

要给data-order这类自定义HTML属性动态赋值，你需要用Angular的attr.前缀明确告知框架：这是一个HTML属性绑定，而非元素的DOM属性。修改后的代码应该是这样：

<td [attr.data-order]="dataOrderValue(row.id)">

额外说明 #

• 这样写之后，Angular会正确执行dataOrderValue(row.id)方法，把返回值作为每个<td>的data-order属性值，每个单元格都会对应不同的排序依据，完全满足你自定义排序的需求。
• 举个例子：如果你的dataOrderValue方法是用来提取ID里的数字部分（比如把SO-123转换成123），表格排序插件就能基于这个数值实现正确的自定义排序，而不是按字符串的字典序乱排。

内容的提问来源于stack exchange，提问作者Abubakar Saddique