Angular中如何基于变量条件实现字符串插值的动态切换

嘿，完全懂你的需求——写两个带*ngIf的div确实有点冗余，咱们可以直接在字符串插值里用三元运算符来实现，一行代码就能搞定，既简洁又清晰！

核心实现代码 #

直接把判断逻辑嵌入插值表达式即可：

{{ cityName === '' ? currentLocationCity.name : cityByCoordiantes.name }}

逻辑说明 #

这个三元运算符的结构是：条件 ? 条件成立时显示的值 : 条件不成立时显示的值，完美匹配你的需求：

• 当cityName是空字符串时，渲染currentLocationCity.name
• 当cityName不为空时，渲染cityByCoordiantes.name

额外优化（可选） #

如果你的cityName可能出现null或undefined的情况（不只是空字符串），还可以简化条件：

{{ !cityName ? currentLocationCity.name : cityByCoordiantes.name }}

因为空字符串、null、undefined在布尔判断中都会被视为false，这种写法适配场景更灵活。

这种方式不需要额外的DOM元素，代码更紧凑，后续维护也更省心～

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