Question

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

时

{{ data | async }}

它会显示

[object Object]

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

{{ data.Name | async }}

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

我创建了一个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

您还可以使用pluck / observable中的rxjs：

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

Pluck 返回一个Observable，其中包含Observable序列中所有元素的指定嵌套属性的值。如果无法解析某个属性，则会为该值返回undefined。

Answer 3

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

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

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要求诺言，但是如果人们使用Observable来适应@ user2884505的答案，因为pluck在RxJS的最新版本中不是直接可用于可观察对象的，因此您可以像这样：

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

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

7 个答案: