Angular条件插值中组件变量available_items无法解析的解决方法

问题原因 #

你在已有的插值表达式{{ ... }}里嵌套了{{available_items}}，Angular不会解析这种嵌套的双大括号，导致available_items被当作纯文本显示，无法读取组件中的变量值。

解决方案 #

方案1：直接在表达式中拼接变量 #

把嵌套的插值替换为直接引用变量，通过字符串拼接整合到条件分支中：

<ul *ngFor="let key of keys">
    <li
        title="{{values[key]}} Node{{values[key] > 1 ? 's' : ''}}{{visibleItems[key] !== 1 ? ' (only ' + available_items + ' available)' : ''}}"
    >
    </li>
</ul>

方案2：使用属性绑定（推荐） #

用方括号[]绑定title属性，结合模板字符串让逻辑更清晰，完全避免嵌套插值的问题：

<ul *ngFor="let key of keys">
    <li
        [title]="`${values[key]} Node${values[key] > 1 ? 's' : ''}${visibleItems[key] !== 1 ? ` (only ${available_items} available)` : ''}`"
    >
    </li>
</ul>

说明 #

• 方案1通过' (only ' + available_items + ' available)'的字符串拼接方式，让Angular直接解析组件中的available_items变量，替换后就能正确显示数值。
• 方案2使用Angular属性绑定语法，配合ES6模板字符串，代码可读性更强，也更符合Angular的开发规范。

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