Angular 7中该*ngIf指令写法存在什么问题？

嘿，这个*ngIf的写法确实存在几个关键问题，咱们一步步拆解清楚：

• 错误使用插值表达式{{}}
  Angular的结构型指令（比如*ngIf）是直接绑定到TypeScript表达式的，不需要用{{}}包裹。你当前的写法会把整个判断逻辑转换成字符串——比如当text和display.company值相等时，插值后会生成类似"abc==abc ||abc==..."的字符串，而在Angular中，非空字符串会被强制解析为true，这就导致你的条件判断完全失效，不管实际值是否匹配，元素都会显示出来。

• 表达式格式不规范
  你的表达式里存在空格混乱的问题：部分位置缺少空格（比如||{{text}}），部分位置又多余空格（比如== {{display.sub_field}}），这不仅降低了代码可读性，还可能在复杂场景下引发难以排查的逻辑问题。

修正后的正确写法 #

直接移除{{}}，将组件类中的属性直接写入表达式，同时规范空格，并推荐使用严格相等运算符===（避免类型转换带来的意外）：

*ngIf="text === display.company || text === display.field || text === display.sub_field"

额外优化建议 #

如果display对象可能为null或undefined，记得加上空值安全运算符?.，避免触发空指针错误：

*ngIf="text === display?.company || text === display?.field || text === display?.sub_field"

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