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

Question

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

{{ data | async }}

它会显示

[object Object]

问题是，我希望能够显示所有不同的属性；即名称、符号等。在 Angular 1 中，我只会使用

{{ data.Name | async }}

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

---

我创建了一个 StockService 类，它返回一个包含对象的 Promise 到我的 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 是 StockService 对象。

在我的 HTML 中：

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

在确定这一点之前，我尝试了许多不同的安排。我希望 StockService 类处理数据获取和 StockInfo 类处理显示。在 Angular 1 中，我会创建一个工厂来获取数据并处理控制器中的数据处理，但我不太确定如何在 Angular 2 中进行此操作。

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

Answer 1

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

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

或

{{(name | async)?}}

Answer 2

上面接受的answer 没有错。但是当我们需要显示对象的许多属性时，附加| async? 变得很麻烦。 更方便的解决方案如下：

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

Answer 3

你也可以从rxjs/observable 中使用pluck：

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

Pluck 从 Observable 序列中的所有元素返回一个包含指定嵌套属性值的 Observable。如果一个属性不能被解析，它会为那个值返回 undefined。

Answer 4

如果你使用 Observable，你可以像这样显示数据：

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

或

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

Answer 5

我认为你把它弄得太复杂了，只需要做这样的事情。

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

和

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

Answer 6

所以我最终编写了自己的异步密钥管道。非常感谢 Simon 在这里帮助指导我。

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;
    }
}

用法：

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

如果 Angular 有自己的函数来解析异步对象的键，请评论一下。

Answer 7

OP 要求承诺，但如果人们使用 Observables，则调整 @user2884505 的答案，因为 pluck 在最近版本的 RxJS 中不能直接在 observables 上作为一种方法使用，你可能会有这样的事情：

import { Pipe, PipeTransform } from '@angular/core';

import { Observable } from 'rxjs';
import { pluck } from 'rxjs/operators';

@Pipe({
  name: 'asyncKey',
  pure: false
})
export class AsyncKeyPipe implements PipeTransform {
  private observable: Observable<Object>;
  private result: Object;

  transform(value: any, ...args: any[]): any {

    if (!this.observable) {
      this.observable = value.pipe(pluck(...args));
      this.observable.subscribe(r => this.result = r);
    }

    return this.result;
  }
}

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

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