web-dev-qa-db-ja.com

Angular 2-promiseからの非同期オブジェクトデータの表示

編集：私の主な問題は、オブジェクトからの非同期データを表示できないように見えることです。データオブジェクトを含む約束があり、使用するとき

{{ data | async }}

表示されます

[object Object]

問題は、すべての異なる属性を表示できるようにすることです。つまり、名前、シンボルなど。Angular 1で、私はただ使用します

{{ data.Name | async }}

しかし、非同期パイプは存在しないdata.Nameのプロミスを解決しようとするため、ここでは機能しません。データプロミスを解決し、そこからNameキーを表示したい。現時点では、非同期オブジェクトからキーを表示するための独自のパイプの作成に取り組んでいますが、組み込みのAngular 2パイプまたはこれを処理する関数があるかどうか疑問に思っています！

表示するHTMLを含むStockInfoクラスにオブジェクトを含むPromiseを返すStockServiceクラスを作成しました。このオブジェクトの名前を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。

それを表示する方法はありますか、それとも私が検討すべきコードを設計するより良い方法はありますか？ありがとう！

asynchronousangular
21
user2884505

特別なパイプは必要ありません。 Angular 2サポートオプションフィールド。オブジェクトに？を追加するだけです。

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

または

{{(name | async)?}}
63
Chybie

rxjs /observableから pluck を使用することもできます。

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

Pluck Observableシーケンス内のすべての要素から、指定されたネストされたプロパティの値を含むObservableを返します。プロパティを解決できない場合、その値に対して未定義を返します。

8
pleerock

上記の受け入れられた answer に問題はありません。しかし、オブジェクトの多くのプロパティを表示する必要がある場合、| async?を追加するのは面倒です。 より便利な解決策は次のとおりです。

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

Observableを使用する場合、次のようにデータを表示できます。

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

または

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

あなたはこれをあまりにも複雑にしており、ただこのようなことをする必要があると思います。

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

そして

<h2>{{name.Name | async}}</h2>
1
Simon H

だから、私は自分の非同期キーパイプを書くことになりました。ここで私を案内してくれた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=が非同期オブジェクトからキーを解決するための独自の関数を持っている場合、誰かがコメントしてください。

0
user2884505