代码之家 › 专栏 › 技术社区 › mana

如何在Angular中对数组元素进行null安全检查?

typescript angular

0

mana · 技术社区 · 2 年前

在我的申请中,我有以下几行:

<div *ngif="MyService.data[4]['result']['score']">Test content here</div>

但是,它显示了以下错误: ERROR TypeError: Cannot read properties of undefined (reading 'score')

我确实尝试过使用 !!MyService.data[4]['result']['score'] 但是仍然是相同的错误。我也尝试以下 MyService?.data[4]['result']['score'] 但仍然没有运气。

我的问题是,我如何才能安全地使用这样的数组而不产生错误。

1 回复 | 直到 2 年前

1

Victor Cordeiro Costa 2 年前

在Angular中,您可以处理这样的情况,即您希望安全地访问嵌套对象和数组的属性,以避免出现“无法读取未定义的属性”之类的错误。为此,您可以使用Angular安全导航操作符( ?. )以及 *ngIf 指令。以下是修改代码的方法:

<div *ngIf="MyService.data && MyService.data[4] && MyService.data[4]['result'] && MyService.data[4]['result']['score']">
  Test content here
</div>

通过添加 MyService.data && MyService.data[4] && MyService.data[4]['result'] && MyService.data[4]['result']['score'] 条件 *ngIf ,在尝试访问“score”属性之前,您正在检查每个嵌套级别是否存在。如果链的任何部分未定义,Angular将不会评估 div ,防止错误发生。

或者,您可以使用安全导航操作员( ?。 )像这样:

<div *ngIf="MyService.data?.[4]?.result?.score">
  Test content here
</div>

这段代码实现了同样的结果,但它更简洁,更易于阅读。

使用这两种方法中的任何一种,Angular都将确保您在访问数据中的深度嵌套属性时不会遇到“无法读取未定义的属性”错误。