如何在角度模板中正确插入嵌套的属性 getter？

Question

我正在尝试将嵌套的属性 getter 插入到 angular html 模板中：

<div class="row">
  <div class="col-xs-12">
    {{ myObject.myProps.someProperty1 }} -- Not working
  </div>
  <div class="col-xs-12">
    {{ myObject.someProperty2 }} -- Working
  </div>
</div>

myObject.myextendedProps 是一个属性 getter 类型的对象，但我得到一个异常：

Cannot read property 'someProperty1' of undefined

但我确定 myProps 不为空，因为当我在控制台记录 myObject 时，我可以单击 Invoke 属性 getter三个点的myProps属性它显示了一个真实的值。

我最好的猜测是属性 getter 问题。有什么解决的建议吗？

Answer 1

可以使用 Elvis 运算符。 Elvis 运算符允许您在尝试访问插值中的属性之前检查对象是否存在

示例{{ myObject?.myProps?.someProperty1 }}

Answer 2

您可能会或可能不会收到错误，具体取决于您初始化数据的时间。

如果您在视图初始化之前初始化数据，即myObject，那么您将不会收到错误。而且和getter.

没有任何关系

因此，为了在初始化视图时保持安全，您可以像这样使用安全导航运算符 (?)。

<div class="row">
  <div class="col-xs-12">
    {{ myObject?.myProps?.someProperty1 }}
  </div>
  <div class="col-xs-12">
    {{ myObject?.someProperty2 }}
  </div>
</div>

或者，您可以使用 *ngIf 指令来确保您仅在 myObject 定义时访问 myObject 的属性。

<div class="row" *ngIf="myObject">
  <div class="col-xs-12" *ngIf="myObject.myProps">
    {{ myObject?.myProps?.someProperty1 }}
  </div>
  <div class="col-xs-12">
    {{ myObject?.someProperty2 }}
  </div>
</div>

我创建了一个简单的stackblitz demo to understand it better. And you can also read more about Angular component lifecycle here https://angular.io/guide/lifecycle-hooks。

如何在角度模板中正确插入嵌套的属性 getter？

How to properly interpolate a nested property getter in angualr template?

javascript

angularjs-interpolate

angular

如何在角度模板中正确插入嵌套的 属性 getter？

How to properly interpolate a nested property getter in angualr template?

javascript

angularjs-interpolate

angular

如何在角度模板中正确插入嵌套的属性 getter？