Angular中使用动态变量设置span颜色报错，如何解决？

错误代码 #

<span style=`color: ${_currentConfig.statusColor};`>{{ _currentConfig?.content }}</span>

报错信息 #

main.js:1 DOMException: Failed to execute 'setAttribute' on 'Element': '${_currentConfig.statusColor};</code>' is not a valid attribute name.

错误原因 #

HTML属性值仅支持用双引号（"）或单引号（'）包裹，你用了反引号（`）来包裹style属性的值，这不符合HTML语法规范。结合模板语法（如Vue类框架）时，这种写法会被浏览器错误解析，把模板字符串的片段识别成属性名的一部分，进而触发报错。

解决方法 #

方案1：使用框架属性绑定语法（以Vue为例） #

通过v-bind:（简写为:）绑定style属性，框架会正确解析模板字符串：

<!-- 对象形式绑定 -->
<span :style="{ color: _currentConfig.statusColor }">{{ _currentConfig?.content }}</span>

<!-- 字符串形式绑定 -->
<span :style="`color: ${_currentConfig.statusColor};`">{{ _currentConfig?.content }}</span>

方案2：纯JavaScript操作DOM #

如果是原生JS场景，直接通过JS设置元素样式：

const targetSpan = document.querySelector('span');
targetSpan.style.color = _currentConfig.statusColor;

内容的提问来源于stack exchange，提问作者Maryam Ghafarinia