Asynchronous 角度2-显示promise中的异步对象数据

编辑：我现在的主要问题似乎是无法显示来自对象的异步数据。我有一个包含数据对象的承诺，当我使用

{{ data | async }}

它将显示

[object Object]

问题是，我希望能够显示所有不同的属性；i、 在Angular 1中，我只使用

{{ data.Name | async }}

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

---

我创建了一个StockService类，它将包含对象的承诺返回给我的StockInfo类，该类包含要显示的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.getStockData（this.ticker，http）.then（函数（val）{
这个数据=val；
this.name=新承诺（函数（解析）{
解析（this.data.Name）；
});
});

其中this.stock是StockService对象

在我的HTML中：

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

{{name | async}

在决定这件事之前，我试过很多不同的安排。我希望StockService类处理数据获取，StockInfo类处理显示。在Angular 1中，我将创建一个工厂来获取数据，并在控制器中处理数据处理，但我不太确定如何在Angular 2中实现这一点

---

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

我觉得你把这件事弄得太复杂了，只需要这样做

this.name = 
  this.stock.getStockData(this.ticker, http)
  .then( val => val.Name )

及

{{name.name | async}

因此我最终编写了自己的异步密钥管道。非常感谢西蒙帮助我来到这里

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'key',
    pure: false
})

export class KeyPipe {
    private fetchedPromise: Promise<Object>;
    private result: string;

    transform(value: Promise<Object>, args: string[]) {
        if(!this.fetchedPromise) {
            this.fetchedPromise = value
                .then((obj) => this.result = obj[args[0]] );
        }
        return this.result;
    }
}

从'angular2/core'导入{Pipe}；
@烟斗({
名称：'键'，
纯：假
})
导出类键管{
私人承诺：承诺；
私有结果：字符串；
转换（值：承诺，参数：字符串[]）{
如果（！this.fetchedPromise）{
this.fetchedPromise=value
.然后（（obj）=>this.result=obj[args[0]]）；
}
返回此结果；
}
}

用法：

<h2>{{ data | key: 'Name' }}</h2>

{{data}键：'Name'}

---

如果Angular有自己的函数用于从异步对象解析密钥，请发表评论。

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

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

或

您还可以使用from/observable：

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

---

从可观测序列中的所有元素返回包含指定嵌套属性值的可观测值。如果无法解析某个属性，它将返回该值的未定义值。

如果使用Observable，则可以如下方式显示数据：

<div *ngIf="data | async; let _data">
   <h3>{{_data.name}}</h3>
</div>

{{{u data.name}

或

{{（数据|异步）.name}

上述公认标准没有问题。但是当我们需要显示对象的许多属性时，附加

| async？

就成了一件麻烦事。更方便的解决方案如下所示：

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

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

OP要求承诺，但如果人们正在使用

可观察的

s，则调整@user2884505的答案，因为在RxJS的最新版本中，

pulk

不能作为一种方法直接用于可观察的，您可能会有如下情况：

从'@angular/core'导入{Pipe，PipeTransform}；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{pull}；
@烟斗({
名称：“asyncKey”，
纯：假
})
导出类AsyncKeyPipe实现PipeTransform{
私人可观察：可观察；
私人结果：客体；
转换（值：任意，…参数：任意[]）：任意{
如果（！这是可观察的）{
this.observable=value.pipe（pull（…args））；
this.observable.subscribe（r=>this.result=r）；
}
返回此结果；
}
}

然后，您可以使用它，即使是嵌套键：

{{ user$ | asyncKey: 'address' : 'street' }}

---

谢谢这当然让事情变得简单了很多，我不敢相信我以前没有想过要这样写，但是数据仍然没有显示在HTML中。我已检查以确保getStockData返回带有正确数据的承诺，但我仍然无法在HTML中显示它。您确定

getStockData

正在调用

resolve

？是的；当我在OP中向monstrosity添加一个console.log时，得到的值包含了我想要的所有数据。有趣的是，当我将HTML更改为{name | async}时，它将显示[object object object]，但尝试取消对name键的引用将不会显示任何内容。谢谢Simon！这是可行的，但是这个对象中可能有20个键值对，我想在页面中显示所有20个键值对。getStockData方法发出HTTP GET请求，我希望能够通过对getStockData的一次调用获取所有这些数据。没有办法将结果存储在对象中吗？您是否尝试过使用

{（data | async.Name}

或

{（data | async）[Name']}

？为什么要将

this.Name

变成一个承诺，而不是仅仅编写

this.Name=this.data.Name

？或者这只是一个做作的例子？@Pylinux我想这是一个做作的例子，考虑到了a。谢谢！我没有意识到这一点！

| async

对承诺有效吗？我以为它只对可观察物起作用？

async

pipe接受承诺或可观察物。这里的官方Angular 2文档中提到了这一点。“安全导航运算符

？

表示该字段是可选的，如果未定义，则应忽略表达式的其余部分”–请指定此标记解决p

<h3>{{(data | async).name}}</h3>

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

{{ user$ | asyncKey: 'address' : 'street' }}