0

我正在尝试将嵌套属性 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是一个属性获取器对象类型，但我得到一个异常：

无法读取未定义的属性“someProperty1”

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

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

4

2 回答 2

2

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

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

于 2019-06-26T03:59:10.710 回答
1

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

如果您在视图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 演示来更好地理解它。您还可以在https://angular.io/guide/lifecycle-hooks阅读有关 Angular 组件生命周期的更多信息。

于 2019-06-26T07:03:28.540 回答