Angular Input属性绑定中插值结合三元运算符使用问题

你的写法核心问题是混用了Angular的两种动态内容语法，导致变量解析失败：

• 方括号[]包裹的属性绑定，内部本身就是JavaScript/TypeScript表达式执行上下文，Angular会直接把里面的内容当JS代码执行，不会解析双大括号{{}}插值语法
• 你写的'element-face-{{item.faceColor}}-filled'会被当成普通字符串原封不动传给si-icon的icon输入属性，{{item.faceColor}}不会被替换成实际的颜色值，组件拿不到正确的图标名称，自然无法正常渲染。

二选一即可：

写法1：字符串拼接（兼容性最好） #

直接用JS原生的字符串拼接语法拼接变量，不需要插值：

<si-icon [icon]="item.isSelected ? 'element-face-' + item.faceColor + '-filled' : 'element-face-' + item.faceColor"></si-icon>

写法2：ES6模板字符串（可读性更好） #

用反引号包裹字符串，通过${}引用变量，写法更简洁：

<si-icon [icon]="item.isSelected ? `element-face-${item.faceColor}-filled` : `element-face-${item.faceColor}`"></si-icon>

• 双大括号{{}}插值仅用于非绑定场景：普通标签文本内容、没有加[]的静态属性上插入动态值
• 方括号[]属性绑定场景下，内部直接遵循JS语法即可，不要插入{{}}插值，两种语法不要混用。

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