Angular模板内联样式插值报property value expectedcss错误原因问询

报错产生原因 #

• 该报错属于编辑器/IDE的静态CSS语法检测误报，和实际代码运行逻辑无关。编辑器的原生CSS校验工具只会按照标准HTML/CSS规范校验代码，无法识别Angular的模板插值语法{{}}，你在内联style属性的CSS值位置写了Angular插值表达式，不符合原生CSS要求的「属性名后必须跟合法CSS属性值」的规则，就会触发该报错提示。
• 代码运行正常的原因是：Angular模板编译阶段会先执行插值表达式，将计算出来的合法颜色值替换到对应位置，再把最终生成的合法style属性渲染到DOM中，浏览器拿到的是完全符合CSS规范的代码，因此功能不会受影响。

推荐解决方案 #

你可以把内联style插值替换成Angular官方推荐的样式属性绑定写法，既可以消除编辑器误报，也更符合Angular开发规范：

<div class="error-loading" [style.color]="tenant?.style.pageColorCardPage ? tenant?.style.pageColorCardPage : tenant?.style.pageColor">

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