Can not bind to an Observable array

Question

I'm using Angular 2 and trying to do some filtering on the array elements before viewing them on the page. The service returns the list of some players with this call:

getPlayers(position: string) {
    return this.get(`players/${position}`)
        .map(r => Observable.from(r.data))
        .catch(error => {
            console.log('Error: ', error);
            return Observable.of<any>();
        });
}

As far as I can tell, this returns an ArrayObservable object.

This is how I consume the service in the component:

this.svc.getPlayers(this.position)
  .subscribe(p => this.players = p); // this.players is Array<Player>

The shape of the data I get from the service is:

{
  "success": true,
  "data": [
   ...
  ]
}

So after all of these steps, I get the error below:

Cannot find a differ supporting object '[object Object]' of type 'Player 1'. NgFor only supports binding to Iterables such as Arrays.

So what's going on here?

@AlexanderCiesielski is right. You're accidentally assigning an Observable to this.players because of .map(r => Observable.from(r.data)). — martin
– martin, Commented Sep 27, 2016 at 14:12

Alexander Ciesielski · Accepted Answer · 2016-09-27 12:29:22Z

1

Cannot find a differ supporting object '[object Object]' of type 'Player 1'. NgFor only supports binding to Iterables such as Arrays.

This means you are binding your *ngFor to an object, rather than an array. Looking at your HTTP call, you return an Observable of an array, rather than an Array.

        .map(r => Observable.from(r.data))

Change this line to

        .map(r => r.data)

.map() already returns an Observable, you don't need to wrap the result in an Observable again.

answered Sep 27, 2016 at 12:29

Alexander Ciesielski

10.8k5 gold badges47 silver badges66 bronze badges

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

2 Comments

Brad Over a year ago

Observables can be bound to in templates using the async pipe.

Alexander Ciesielski Over a year ago

Yes, but the whole point of async pipe is to leave out subscribing and unsubscribing to/form observables, which is not the case in this problem.

Collectives™ on Stack Overflow

Can not bind to an Observable array

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related