Ionic中ngStyle的OR条件不生效问题求助

我看你遇到的问题是因为运算符优先级导致的逻辑解析错误，你的代码里没有给OR条件加上括号，使得三元运算符的优先级高于逻辑或（||），最终逻辑和你预期的不一样。

问题代码的核心问题 #

你的原代码：

<p [ngStyle]="detailsp?.discount || detailsp?.discountp === '0' ? {'text-decoration':'none'} : {'text-decoration':'line-through'}"> 
  MRP: ₹{{detailsp.product_price || detailsp.disprice}} 
</p>

在JavaScript/TypeScript的运算符优先级规则里，三元运算符（?:）的优先级比逻辑或（||）更高，所以这段代码会被浏览器解析成：

detailsp?.discount || (detailsp?.discountp === '0' ? {'text-decoration':'none'} : {'text-decoration':'line-through'})

这完全偏离了你原本的逻辑——你本来是想先判断detailsp?.discount || detailsp?.discountp === '0'这个整体条件的真假，再决定应用哪个样式。

修正后的代码 #

只需要给整个OR判断加上括号，确保逻辑先被正确计算：

<p [ngStyle]="(detailsp?.discount || detailsp?.discountp === '0') ? {'text-decoration':'none'} : {'text-decoration':'line-through'}"> 
  MRP: ₹{{detailsp.product_price || detailsp.disprice}} 
</p>

额外优化建议 #

为了代码更清晰、更易维护，你也可以把判断逻辑抽到组件类里，让模板更简洁：
比如在你的组件.ts文件中添加：

get shouldShowNoStrike(): boolean {
  return this.detailsp?.discount || this.detailsp?.discountp === '0';
}

然后模板里改成：

<p [ngStyle]="shouldShowNoStrike ? {'text-decoration':'none'} : {'text-decoration':'line-through'}"> 
  MRP: ₹{{detailsp.product_price || detailsp.disprice}} 
</p>

这样不仅可读性更高，后续修改条件也更方便，调试的时候直接打印shouldShowNoStrike的值就能快速定位问题。

另外还要注意确保detailsp对象已经被正确初始化（比如在ngOnInit中赋值，或者用异步管道处理Observable），避免因为detailsp为undefined导致的判断异常。

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