角子对象对象可能是“未定义”的

编程问答 2022-06-09

问题描述

我有一个从api返回的对象，而这个对象有一个子对象。 当我在组件html中显示此子对象的属性时，他会工作。 但是当我尝试构建项目时，出现以下错误：

对象可能是'undefined'。

我的html组件代码：

<img [src]="person?.gallery?.images[0]?.url" />

我也尝试下面的代码，但是现在可以正常工作并且很复杂：

<ng-container *ngIf="person !== undefined && person.gallery !== undefined && person.gallery.images !== undefined && person.gallery.length > 0 && person.gallery.images[0] !== undefined">
        <img [src]="person?.gallery?.images[0]?.url" />
</ng-container>

在localhost中工作，但是当我执行ng build –prod时，出现这些错误。

解决方法

Angular的开发和生产模式不同。根据您在项目中使用的设置，生产模式可能会进行其他检查。

根据您的情况，尝试使用：

<ng-container *ngIf="person?.gallery?.images[0]?.url as u">
  <img [src]="u" />
</ng-container>

我还建议重新考虑您的战术。 foo?.bar?.baz?.goo构造看起来可以使用连击实现。

angularangulararraysarraysarraysjavascriptlintlinttypescripttypescripttypescript