Angular 15使用接口导致模板可选链报错问题求助

针对你遇到的问题，以下是几种安全且符合Angular严格类型检查要求的解决方案：

方案一：简化*ngIf条件（推荐） #

直接利用可选链语法简化判断逻辑，无需多重前置判断：

<thead *ngIf="invData?.columns?.[table]?.length > 0"></thead>

原理：如果invData、columns或对应table键的列数组任意一项为undefined，?.length会返回undefined，而undefined > 0会被解析为false，刚好满足"仅当列数组存在且长度大于0时显示thead"的需求。

方案二：封装判断逻辑到组件类 #

将判断逻辑从模板移到组件TS文件中，提升可维护性同时规避模板类型检查问题：

组件TS代码补充： #

hasValidColumns(table: string): boolean {
  // 双重感叹号将值转为布尔类型，确保只有存在且长度>0时返回true
  return !!this.invData?.columns?.[table]?.length;
}

模板代码修改： #

<thead *ngIf="hasValidColumns(table)"></thead>

方案三：非空断言（谨慎使用） #

如果你能100%确认运行时invData.columns和对应table的列数组一定存在，可以使用非空断言!跳过类型检查：

<thead *ngIf="invData!.columns![table].length > 0"></thead>

注意：此方法存在运行时报错风险，若数据未按预期加载会抛出Cannot read properties of undefined错误，仅在数据来源绝对可靠时使用。

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