Angular5中向自定义HTML属性传递JSON数据报错求助

我来帮你搞定这个问题！你遇到的“Element not a Attribute Property of LI”错误，本质是Angular对DOM属性和HTML属性的处理逻辑差异导致的——Angular默认会把你绑定的属性当成DOM元素的内置属性，而你自定义的属性并不在LI元素的内置属性列表里，所以就报错了。

下面给你两种靠谱的解决方法：

方法1：用attr.前缀绑定自定义HTML属性 #

直接在自定义属性前加上attr.前缀，告诉Angular这是一个HTML属性而非DOM属性，同时用json管道把JSON对象转成字符串（因为HTML属性只能存储字符串值）：

<li [attr.your-custom-attr]="yourJsonData | json">列表项内容</li>

比如你要绑定的JSON数据是{id: 1, name: 'test'}，经过json管道处理后，会变成字符串形式的{"id":1,"name":"test"}，完美适配HTML属性的要求。

方法2：使用符合HTML规范的data-*自定义属性 #

HTML标准推荐自定义属性都以data-开头，这种写法不仅不会触发Angular的属性识别错误，还能更好地兼容各种场景：

<li [attr.data-your-data]="yourJsonData | json">列表项内容</li>

如果之后需要在JS里读取这个属性值，直接用element.getAttribute('data-your-data')拿到字符串，再通过JSON.parse()转回JSON对象即可。

注意点 #

• 千万别直接绑定JSON对象而不用json管道，否则Angular会把对象转成[object Object]这个毫无意义的字符串，完全达不到你传递数据的目的。
• 如果你的自定义属性名是驼峰式的（比如myData），绑定的时候要转成短横线分隔的形式（attr.my-data），这符合HTML属性的命名规范。

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