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

编辑:现在看起来我的主要问题是我似乎无法显示来自对象的异步数据.我有一个包含数据对象的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(function(resolve) {
    resolve(this.data.Name);
  });
});

其中this.stock是StockService对象.

在我的HTML中:

{{name | async}}

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

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

1> Chybie..：

---

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

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

要么

{{(name | async)?}}

---

`async`管道接受promise或observables.在这里的官方Angular 2文档中提到了它.https://angular.io/docs/ts/latest/guide/pipes.html

2> Manoj Shrest..：

---

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

   
 {{ localData.name }} 
   
 {{ localData.property1 }} 
   
 {{ localData.property2 }} 

3> pleerock..：

---

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

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

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