我在我的模板中成功地做到了这一点
this.destinyForm.get('category').value?.includes('male')
请注意带有安全类型运算符的 value?.includes，因为表单可能没有值，但是当我在 component.ts 中使用相同的代码时，我得到:
模块解析失败:意外的标记 您可能需要一个合适的加载器来处理这种文件类型。
有什么想法吗？
最佳答案
?. 是 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 block 中解包，这将安全地捕获任何如果链的一部分为空/未定义，则类型错误。您可以只用常规的 try/catch 来做同样的事情，但这样做意味着您不必一遍又一遍地将其添加到您的代码中。 (注意 - 如果您访问的值可能引发另一种错误，这将默默地吞下它，所以如果它很重要，请确保单独处理)
关于javascript - Angular 安全类型运算符在组件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51794991/