Angular2 - how to use the async pipe with non array result?

Question

In this Plunker I have this template :

 <span *ngFor="let a of Articles">{{a}}</span>

This is the component class :

export class App
{
    Articles: number[];
    constructor()
    {
        this.getData();
    }
    simualteDb()
    {
        return new Promise((a, b) =>
        {
            setTimeout(function()
            {
                a(
                {    // notice , an object ,not an array
                    data: [0, 1, 2]
                });
            }, 500)
        });
    }
    async getData()
    {
        this.Articles = (await this.simualteDb()).data;
    }
}

This does work and I do see 012 in the output. But I want to use the async pipe.

So I want my template to be :

 <span *ngFor="let a of Articles |async ">{{a}}</span>

But there is a problem.

Articles is not an array. It is an object with data prop which is the required array.

I can't do something like this :

   <span *ngFor="let a of Articles.data |async ">{{a}}</span>

I've created another plunker which returns only an array :

and It does work with |async.

Question:

Looking at my first code , How can I use the async pipe while still resolving an object and not an array ?

{data: [0, 1, 2]}

AVJT82 · Accepted Answer · 2017-04-08 19:07:34Z

2

Giving you the other option to use the async pipe (which you mentioned you wanted), means that you need to have an Observable to work with... service returns Observable:

getArticles() {
  return this.http.get('url')
    .map(res => res.json())
}

And in the component assign the Observable:

ngOnInit() {
  this.Articles = this.service.getArticles()
}

Then you can use the async pipe in your view like so:

<div *ngFor="let a of (Articles | async)?.data">{{a}}</div>

Demo

answered Apr 8, 2017 at 19:07

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Royi Namir Over a year ago

Yeah I 've just seen this answer and it can be used with promises also - here is a demo plunker of mine with promise and async pipe. so the "you need to have an Observable" part is incorrect ;-)

eko Over a year ago

@Royi I also tried it like you did but with await infront of the Promise as your plunker included it. I was trying to figure out what was wrong :D

yurzui Over a year ago

Yes, it can be used with promises but AsyncPipe can't consume array or object. Only Observable, Promise or EventEmitter The next wont work {data: [0, 1, 2]} | async and [0,1,2] | async

Royi Namir Over a year ago

@yurzui Thanks for the clarification.

Collectives™ on Stack Overflow

Angular2 - how to use the async pipe with non array result?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related