Angular字符串内条件判断不生效 如何根据变量动态切换图标

你写法的问题在于{{ }}插值语法仅用于插入纯文本内容，不能直接在HTML属性的引号内部做字符串拼接运算，所以class属性无法按预期解析出动态后缀。

1. Vue 2/Vue 3 框架 #

使用Vue内置的动态class绑定语法:class（v-bind:class的缩写）拆分公共类和动态类：

<span>
  <i class="fas" :class="extendedOptionsContainer ? 'fa-caret-down' : 'fa-caret-up'"></i>
</span>

你也可以直接用模板字符串拼接整个class值：

<span>
  <i :class="`fas fa-caret-${extendedOptionsContainer ? 'down' : 'up'}`"></i>
</span>

2. React 框架 #

用JSX的模板字符串语法拼接className：

<span>
  <i className={`fas fa-caret-${extendedOptionsContainer ? 'down' : 'up'}`}></i>
</span>

3. 原生JavaScript #

渲染元素时用模板字符串拼接类名：

const span = document.createElement('span')
const icon = document.createElement('i')
icon.className = `fas fa-caret-${extendedOptionsContainer ? 'down' : 'up'}`
span.appendChild(icon)

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