Question

我正在尝试将嵌套的属性getter插入到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对象，但出现异常：

无法读取未定义的属性'someProperty1'

但是我确定myProps不为null，因为在控制台记录myObject时，我可以点击 Invoke property getter （调用属性获取器）三个点myProps属性显示的是实际值。

我最好的猜测是它是一个属性获取器问题。有什么建议可以解决吗？

Answer 1

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

示例Task.Run()

Answer 2

根据初始化数据的时间，您可能会或可能不会收到错误消息。

如果在初始化 view 之前初始化数据，即myObject，则不会收到错误。它与吸气剂无关。

因此，为了确保视图初始化时的安全，您可以使用像这样的安全导航操作符（？）。

<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以更好地理解它。您还可以在https://angular.io/guide/lifecycle-hooks处了解有关Angular组件生命周期的更多信息。

如何在angualr模板中正确插入嵌套的属性获取器？

2 个答案: