Angular中如何给模板元素条件添加style属性且空值时不渲染style？

解决方案1：调整单样式绑定的返回值 #

Angular 单样式绑定的规则为：当绑定的值为 null 或 undefined 时，会自动移除对应的样式属性，不会将其渲染到元素的 style 属性中。
你之前用三元运算符无法生效，大概率是无值分支返回了空字符串而非 null/undefined，调整写法即可：

<div class="backgroundGradient" [style.backgroundImage]="myBackgroundImageUrl || null"></div>

也可以用标准三元写法：

<div class="backgroundGradient" [style.backgroundImage]="myBackgroundImageUrl ? myBackgroundImageUrl : null"></div>

解决方案2：使用 NgStyle 指令 #

如果后续还有其他条件样式需要绑定，用 NgStyle 指令可扩展性更强：

<div class="backgroundGradient" [ngStyle]="myBackgroundImageUrl ? { backgroundImage: myBackgroundImageUrl } : {}"></div>

当 myBackgroundImageUrl 无有效值时，传入 NgStyle 的是空对象，不会生成任何额外的 style 字段，完全不影响原有类样式的生效。

原问题原因说明 #

你之前的写法在无值时会触发 Angular 的默认解析逻辑，将空值/假值解析为 background-image: none，才会覆盖 backgroundGradient 类的样式，只要将无值场景的绑定返回值改为 null/undefined 即可规避该问题。

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