Angular：ng如果不适用于object.property

Question

我确定我在这里需要：facepalm，但是在我从Angular 7升级到9时，这似乎已经按预期停止了。

如果不是空字符串，我想有条件地显示属性：

<span *ngIf="foo.bar">{{foo.bar}} - </span>{{ foo.otherBar }}

这曾经用来显示foo.bar（例如“蝙蝠侠”），但现在不再显示。如果删除*ngIf子句，则会得到foo.bar的值，并且它是一个非零长度的字符串。

我什至尝试过

[*ngIf="foo.bar === ''"和!== ''，它仍然是隐藏的，即使其中至少一个应返回true。

*ngIf="!!foo.bar"可以工作，但是有点怪异，我想理解为什么*ngIf="foo.bar"不能正常工作，因为Angular docs本身说ngIf的好处是可以防止null。

现在，从API加载了foo，但是再次显示属性时，没有*ngIf就很好了，因此更改检测之类的时间问题还是什么？同样，从API返回后，foo.otherBar的显示就很好，但这就像ngIf的评估不正确。

Answer 1

这可能无法解决您的问题，但可能会对您有所帮助。首先，对象foo未定义，您正在从API获取数据。

尝试在*ngIf()中进行可选链接：

<span *ngIf="foo?.bar">{{foo.bar}} - </span>{{ foo.otherBar }}

或者您也可以尝试：

<span *ngIf="foo && foo.bar">{{foo.bar}} - </span>{{ foo.otherBar }}

如果foo对象为null，则访问bar成员将引发错误。

您提供的代码没有问题。可能是其他原因造成的。