如何在Angular的[attr.aria-label]属性中使用条件判断动态赋值

条件判断动态赋值 #

可以直接通过Angular模板支持的三元运算符实现条件赋值，无需额外封装方法：

<!-- 假设你的数值变量名为 value -->
<your-component
  [attr.aria-label]="value < 5 ? 'is minimum of 5' : 'is more than 5'"
>
</your-component>

如果需要覆盖等于5的边界场景，可自行调整判断逻辑，例如：
[attr.aria-label]="value < 5 ? 'is minimum of 5' : value ===5 ? 'equal to 5' : 'is more than 5'"

字符串与变量拼接实现 #

你当前使用数组的写法，绑定后会默认调用数组的toString()方法，生成带逗号分隔的文本，不符合无逗号拼接的需求，可使用以下两种写法实现：

• 写法1：模板字符串拼接（更易读，推荐）

  [attr.aria-label]="`text ${variable} other text`"
  

• 写法2：加号拼接

  [attr.aria-label]="'text ' + variable + ' other text'"
  

如果需要同时结合条件判断和变量拼接，可直接组合两种语法：

[attr.aria-label]="value <5 ? `text ${value} is minimum of 5` : `text ${value} is more than 5`"

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