时间戳

首页 > 解决方案 > Angular 安全类型运算符在组件中不起作用

javascript - Angular 安全类型运算符在组件中不起作用

问题描述

我在我的模板中成功地做到了这一点

this.destinyForm.get('category').value?.includes('male')

请注意value?.includes使用安全类型运算符，因为表单可能没有值，但是当我在 component.ts 中使用相同的代码时，我得到：

模块解析失败：意外令牌您可能需要适当的加载程序来处理此文件类型。

有任何想法吗？

标签： javascriptangular

解决方案

?.是 Angular 模板的一个特性，而不是 TypeScript 的一部分——两者的语法非常相似，但有一些区别，这就是其中之一。这意味着您不能在组件代码中使用它。其他几种方法可以做你想做的事：

标准方法是使用短路逻辑来检查可能丢失的部分，例如

this.destinyForm.get('category').value &&
this.destinyForm.get('category').value.includes('male')

如果value为 null 或未定义，它将返回该值并且不尝试读取剩余的属性。（注意 - 如果get()有副作用，如果您使用此方法，您可能需要先调用它并将结果存储在变量中）

我在自己的应用程序中使用的快捷方式是使用函数来安全地访问值：

function getSafe<T> (func: () => T): T {
    try {
        return func()
    } catch {
        return undefined
    }
}

getSafe(() => this.destinyForm.get('category').value.includes('male'))

它的工作方式是，通过将其包装在匿名函数中，它不会尝试读取值，直到匿名函数在try块内展开，如果链的一部分为空/未定义，它将安全地捕获任何类型错误。你可以通过常规的 try/catch 来做同样的事情，但是这样做意味着你不必一遍又一遍地将它添加到你的代码中。（注意 - 如果您正在访问的值可能会引发另一种错误，这会默默地吞下它，所以如果它很重要，请确保单独处理）

推荐阅读