Angular模板条件判断报错：string[]与string类型无交集恒为true

问题场景 #

你在Angular模板中编写条件判断时收到类型错误提示：condition will always return 'true' since the types 'string[]' and 'string' have no overlap，相关代码如下：

HTML代码 #

<div class="report-select-container" *ngIf="reportFilter?.transactionType !== 'Disposition'">
</div>

TS数据（reportFilter对象） #

{
   "transactionType": ["Disposition"],
   "transactionSubType": null,
   "wagRegion": [],
   "repm": [],
   "masterBrokerName": [],
   "masterBrokerCompany": [],
   "phase": []
}

报错原因 #

transactionType是字符串数组类型，你直接把它和字符串'Disposition'做不等比较，这在类型层面完全不匹配——数组永远不可能等于单个字符串，因此TypeScript提示该条件永远为true。

解决方案 #

你需要判断数组中是否包含目标字符串，使用数组的includes()方法即可，同时保留可选链操作符处理空值情况：

修改后的HTML代码 #

<div class="report-select-container" *ngIf="!reportFilter?.transactionType?.includes('Disposition')">
</div>

可选方案：组件内封装判断逻辑 #

如果模板中条件复杂，可将判断逻辑移到组件类中，让模板更简洁：

// 组件类中添加方法
hasDispositionType(): boolean {
  return this.reportFilter?.transactionType?.includes('Disposition') ?? false;
}

模板中调用该方法：

<div class="report-select-container" *ngIf="!hasDispositionType()">
</div>

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