绑定到以角度2+在异步模式下获取数据的变量

时间:2018-02-06 00:16:59

标签: angular data-binding

我有以下用于呈现用户详细信息的模板:

<ion-buttons end>
  <button (click)="loadProfilePage()" ion-button clear item-end icon-right>{{ api.userData?.inventory?.points }}/
    <p ion-text color="gold">{{ api.userData?.inventory?.credits }}</p>
    <ion-icon name="contact"></ion-icon>
  </button>
</ion-buttons>

因此,有一个提供程序(api)从应用程序启动时从本地存储中获取此数据。

目前我正在使用&#34;?&#34;迹象表明此评估应该是&#34;懒惰&#34;由于数据可能尚未存在,因此api.userData可以返回undefined。

问题 - 这是一个正确的实现还是应该切换到observable和async管道?

感觉就像我现在所做的那样,但我不确定这种做法是否合适?很简单,它应该如何用于数据绑定到在应用程序启动窗体异步源获取其值的变量(本地持久性)

2 个答案:

答案 0 :(得分:1)

您有几种选择:

1)您可以像使用安全导航操作符(?)一样使用。这是一个有效的(经常使用的)选项。

2)在按钮上使用ngIf,因此在加载数据之前,按钮甚至不会出现。但这可能不符合您的要求。

3)使用路由解析器并在路由到该组件之前预先加载路由的数据。然后,在显示页面之前,数据已准备就绪,您不需要ngIf或安全导航操作符。

答案 1 :(得分:0)

您可以在加载数据时使用observable进行订阅。最好在Component中使用一个属性,默认为空并绑定该属性。在订阅中,您只需要确定新值。