在角度 html 模板中检查具有数组类型的联合类型变量的长度时出现生产问题答案

【问题标题】：Prod build issue while checking the length of union type variable having array type in angular html template在角度 html 模板中检查具有数组类型的联合类型变量的长度时出现生产问题
【发布时间】：2021-06-21 15:35:00
【问题描述】：

我在检查联合类型数组、字符串和数字的长度时遇到问题。在 prod 模式下构建 Angular 项目时的问题示例代码：

ts 中的变量

public developerData: {
    [key: string]: {
        type: 'default';
        data: string | number;
    } | {
        type: 'array',
        data: Array < string | number | boolean >
    }
} = {
    'test': {
        'type': 'array',
        'data': ['1', '2', '3']
    }
};

HTML 模板

<div *ngIf="developerData['test']['type']=='array' && developerData['test']['data'].length >= 0">
   Welcome
</div>

产品构建错误

类型“字符串”上不存在属性“长度”|号码 | （字符串 | 号码 |布尔值）[]'。类型上不存在属性“长度” '数字'。

软件版本

角度：7.3.5
TypeScript：3.1.6
节点：10.16.3
NPM：6.9.0

【问题讨论】：

标签： html angular typescript union-types

【解决方案1】：

访问变量时，它可以是“字符串”（或）“数字”（或）“布尔值”，同时您使用“|”指定在打字稿中。

所以在访问变量的 'length' 属性之前，请在 JS 中使用 'typeof' 方法添加类型检查。

您可以在“tsx”文件中使用验证器函数来检查类型并返回正确的验证结果并在“ngif”中调用它

【讨论】：

可以在没有打字稿验证的情况下进行检查。我必须在 HTML 标记中检查这一点。
如果需要，您可以在 ngif 中编写嵌套条件语句，但这会使调试变得更加困难。但是您可以在 ngIf 中调用验证器函数，例如
Welcome
你能分享一些可能的代码sn-p
stackoverflow.com/questions/51674156/… - 请参阅此问题以了解不同的实现
我想要验证而不调用 ts 方法。滚动页面时，该方法调用了很多次。这可能会导致页面挂起。