asynchronous - Angular 2 - Displaying async Object data from promise

Question

Edit: It looks like my main problem now is that I can't seem to display async data from an object. I have a promise containing the data object, and when I use

{{ data | async }}

it will display

[object Object]

The issue is, I want to be able to display all the different attributes; i.e, Name, Symbol, etc. In Angular 1, I would just use

{{ data.Name | async }}

but that doesn't work here, since the async pipe tries to resolve the data.Name promise, which doesn't exist. I want to resolve the data promise and then display the Name key from it. At the moment, I'm working on creating my own pipe to display a key from an async object, but I'm wondering if there's a built-in Angular 2 pipe or function to handle this!

---

I've created a StockService class that returns a Promise containing an object to my StockInfo class, which contains the HTML to be displayed. I want to display the name of this object in my HTML, but I can't seem to get it to display.

In my StockInfo constructor:

this.stock.getStockData(this.ticker, http).then(function(val) {
  this.data = val;

  this.name = new Promise<string>(function(resolve) {
    resolve(this.data.Name);
  });
});

where this.stock is the StockService object.

In my HTML:

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

I've tried a number of different arrangements before settling on this one. I want the StockService class to handle the data fetching and the StockInfo class to handle the display. In Angular 1, I would create a factory for fetching data and handle the data processing in the controller, but I'm not quite sure how to go about this in Angular 2.

Is there a way to get it to display, or are there better ways to design my code that I should look into? Thanks!

Answer 1

You do not need any special pipe. Angular 2 suppport optional field. You just need to add ? in your object

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

or

{{(name | async)?}}