"v.context.$implicit.categories[0] is undefined" 离子 3 中的错误

Question

我正在尝试使用WordPress rest API访问Ionic产品类别的slug。这似乎在一页上工作正常<h3 class="product-name uppercase">{{productdetail?.categories[0].slug}}</h3>但是当我尝试在另一个页面上以 angular 的方式实现相同的 for 循环时，这似乎不起作用

<div class="width50" *ngFor="let object of dataList">
<img src="{{object.images[0].src}}" width="150"  (click)="navigateToPage(object.id)" />
<h3 class="product-name uppercase" text-nowrap>{{object?.categories[0].slug}}</h3> 
</div>

它给出了一个错误，因为v.context.$implicit.categories[0] is undefined但是在同一页面上，图像源的代码似乎工作正常。

Answer 1

根据文档

Angular 安全导航运算符 (？.( 是一个流畅而方便的人 防止属性路径中出现空值和未定义值的方法。这里 它是，防止视图渲染失败，如果当前英雄是 零。

这样如果写

obj?.foo

Angular 会将其转换为以下表达式。

obj == null ? null : obj.foo

因此，如果obj为空值，则不会看到任何错误。

在您的情况下，您可以使用表达式

object?.categories[0]?.slug

将转换为

object == null ? null : object.categories[0] == null ? null : object.categories[0].slug;

如果您不知道对象是否包含任何值，或者异步加载数据并且对象首次undefined，则安全导航运算符非常有用。