Async pipe with Observables

Question

Trying to mimic the HTTP requests, and to make a static data to be presented with the async pipe.

ts:

footerContent$: Observable<{ key: string, value: string }>[] = ([
    of({ key: '1', value: 'a' }),
    of({ key: '2', value: 'b' }),
    of({ key: '3', value: 'c' })
])

HTML:

<div *ngFor='let content of footerContent$ | async'>
    {{content.value}}
</div>

Here I'm getting an Array of Observables and the pipe doesn't seem to work

ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'

Then i tried another approach and switch to from operator (so i can get one observable object):

footerContent$: Observable<{ key: string, value: string }> = from([
    ({ key: '1', value: 'a' }),
    ({ key: '2', value: 'b' }),
    ({ key: '3', value: 'c' })
])

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoChec

Any suggestions why it doesn't work?

The async pipe is used to subscribe to an Observable directly from the template. In your first example you're dealing with an array not an Observable. In your second example your Observable emits multiple Objects and not an Array, so using ngFor doesn't work there. I'm not sure what you're trying to do exactly. In your first example you could wrap the array of Observables with forkJoin, in your second example you could use of instead of from. — frido
– frido, Commented Aug 7, 2019 at 8:44

Zeev Katz · Accepted Answer · 2019-08-09 16:59:57Z

What you are doing is passing a list of observables to an async pipe, but async pipe expects to get only observables and promises. So what you need to do is convert your list of observables to one combined observable using one of the combination functions that RxJS provides (merge, zip, forkJoin, etc.).

See an example of observables combination using forkJoin. In this example the combined observable will emit when all observables complete:

footerContent$: Observable<SomeObject[]> = forkJoin(
  of({ key: '1', value: 'a' }),
  of({ key: '2', value: 'b' }),
  of({ key: '3', value: 'c' })
)

After you will subscribe to this combined observables the emitted value will look like this:

[
  { key: '1', value: 'a' },
  { key: '2', value: 'b' },
  { key: '3', value: 'c' }
]

Note that forkJoin can get a map of observables:

footerContent$: Observable<{[key: string]: SomeObject}> = forkJoin({
  request1: of({ key: '1', value: 'a' }),
  request2: of({ key: '2', value: 'b' }),
  request3: of({ key: '3', value: 'c' })
})

In this case, the emitted value will look like this:

{
  request1: { key: '1', value: 'a' },
  request2: { key: '2', value: 'b' },
  request3: { key: '3', value: 'c' }
}

Here is a link for more details about the combination functions of RxJS.

Collectives™ on Stack Overflow

Async pipe with Observables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related