Angular 2 - Отображение данных объекта async Object из обещания

Изменить: похоже, моя главная проблема заключается в том, что я не могу отображать асинхронные данные из объекта. У меня есть обещание, содержащее объект данных, и когда я использую

{{ data | async }}

отобразится

[object Object]

Проблема заключается в том, что я хочу иметь возможность отображать все разные атрибуты; iee, Name, Symbol и т.д. В Angular 1 я просто использовал бы

{{ data.Name | async }}

но это не работает здесь, так как асинхронный канал пытается решить проблему с data.Name, которая не существует. Я хочу разрешить обещание данных, а затем отобразить из него имя. На данный момент я работаю над созданием своего собственного канала для отображения ключа от объекта async, но мне интересно, есть ли там встроенный 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 я создал бы factory для извлечения данных и обработки данных в контроллере, но я не совсем уверен, как это сделать в Angular 2.

Есть ли способ заставить его отображать, или есть ли лучшие способы разработки моего кода, на который я должен смотреть? Спасибо!

Ответы

Ответ 1

Вам не нужна специальная труба. Angular 2 необязательное поле suppport. Вам просто нужно добавить? в вашем объекте

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

или

{{(name | async)?}}

Ответ 2

Вы также можете использовать Pluck из rxjs/наблюдаемым:

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

Pluck Возвращает Observable, содержащий значение указанного вложенного свойства из всех элементов последовательности Observable. Если свойство не может быть разрешено, оно вернет undefined для этого значения.

Ответ 3

Если вы работаете с Observable, вы можете отображать данные следующим образом:

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

или

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

Ответ 4

Я думаю, что вы делаете это слишком сложным и просто нужно сделать что-то вроде этого.

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

и

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

Ответ 5

Итак, я закончил писать свой собственный асинхронный ключевой канал. Огромное спасибо Симону за то, что он помогает мне здесь.

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 имеет свои собственные функции для разрешения ключа от асинхронного объекта.