Angular 2 - 显示来自promise的异步对象数据

Question

编辑:现在看起来我的主要问题是我似乎无法显示来自对象的异步数据.我有一个包含数据对象的promise,当我使用时

{{ data | async }}

它会显示出来

[object Object]

问题是,我希望能够显示所有不同的属性; 即名称,符号等.在Angular 1中,我会使用

{{ data.Name | async }}

但这在这里不起作用,因为异步管道试图解析不存在的data.Name promise.我想解析数据承诺,然后从中显示Name键.目前,我正在创建自己的管道以显示来自异步对象的密钥,但我想知道是否有内置的Angular 2管道或函数来处理这个问题!

---

我创建了一个StockService类,它返回一个包含我的StockInfo类对象的Promise,其中包含要显示的HTML.我想在我的HTML中显示该对象的名称,但我似乎无法显示它.

在我的StockInfo构造函数中:

this.stock.getStockData(this.ticker, http).then(function(val) {
  this.data = val;

  this.name = new Promise<string>(function(resolve) {
    resolve(this.data.Name);
  });
});

其中this.stock是StockService对象.

在我的HTML中:

<h2>{{name | async}}</h2>

在解决这个问题之前,我已经尝试了许多不同的安排.我希望StockService类处理数据提取和StockInfo类来处理显示.在Angular 1中,我将创建一个工厂来获取数据并处理控制器中的数据处理,但我不太确定如何在Angular 2中进行此操作.

有没有办法让它显示,或者有更好的方法来设计我应该研究的代码？谢谢!

Answer 1

你不需要任何特殊的管道.Angular 2支持可选字段.你只需要添加？在你的对象中

{{ (data | async)?.name }}

要么

{{(name | async)?}}

Answer 2

上面接受的答案没有错.但是| async?当我们需要显示对象的许多属性时,它会变得很麻烦.在更方便的解决方案如下:

<div *ngIf="data | async as localData">
   <div> {{ localData.name }} </div>
   <div> {{ localData.property1 }} </div>
   <div> {{ localData.property2 }} </div>
</div>

Answer 3

您还可以使用采摘从rxjs /观察到:

{{ user.pluck("name") | async }}

Pluck 返回一个Observable,它包含Observable序列中所有元素的指定嵌套属性的值.如果无法解析某个属性,则该值将返回undefined.