Angular中如何简化判断变量不等于多个值的*ngIf条件写法

优化方案 #

首先需要先纠正你现有代码的逻辑问题：用||连接多个!=判断的逻辑永远为真——因为任意值都不可能同时等于多个不同的字符串，因此你的判断条件永远成立，没有实际过滤作用。
如果你实际需要的是「当value.data不属于17/18/19/20这几个值时显示元素」，可以用以下几种简化写法：

1. 模板内直接用Array.includes()判断（最简洁） #

如果你的Angular版本支持ES6+语法，直接在模板内用数组包含判断即可，无需重复写条件：

<div *ngIf="!['17','18','19','20'].includes(value.data)"></div>

如果需要反过来判断「属于这几个值时显示」，删掉最前面的!即可。

2. 封装为组件方法（更易复用、性能更优） #

如果这个判断逻辑多处使用，建议写到组件类中封装为方法：
组件.ts文件

// 其他代码省略
checkDataValid(data: string): boolean {
  // 逻辑和上面一致，需要反向判断就去掉!
  return !['17','18','19','20'].includes(data);
}

模板文件

<div *ngIf="checkDataValid(value.data)"></div>

3. 连续数值范围判断 #

你需要排除的是17~20的连续数值，如果value.data的取值都是数字字符串，可以直接转成数字判断范围，代码更短：

<!-- 小于17或大于20时显示，等价于不在17~20范围内 -->
<div *ngIf="+(value.data) < 17 || +(value.data) > 20"></div>

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