Question

我成功地在模板中完成了

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

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

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

有什么想法吗？

Answer 1

?.是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块中将匿名函数解包为止，这将安全地捕获任何TypeError（如果存在）链的null / undefined。您可以通过常规的try / catch来做同样的事情，但是这样做意味着您不必一遍又一遍地将其添加到代码中。（请注意-如果您访问的值可能引发其他类型的错误，则它将无声地吞下它，因此请确保在重要的情况下单独进行处理）

角安全类型运算符不在组件中工作

1 个答案: