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

Question

I have a problem with async pipe and observer combination. I have been trying to create a team.service with 'players'and app.component, that will get that data. I am getting the following error:

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

Morethere, When I erase async pipe, it works. Do someone know how to fix? My code

team.service:

export class TeamService {

  fillPlayers(): any {
    return [
      { 'name': 'Buzz', 'surname': 'Astral' },
      { 'name': 'Mad', 'surname': 'Max' },
      { 'name': 'Eazy', 'surname': 'E' }
    ];
  }

  constructor() {}

  getPlayersWithObservable(): Observable<TeamInterface[]> {
    return this.fillPlayers();
  }
}

app.component.ts

export class AppComponent {

  observableTeam: Observable<TeamInterface[]>;

  constructor(private _teamService: TeamService) {}

  ngOnInit() {
    this.observableTeam = this._teamService.getPlayersWithObservable();
  }
}

app.component.html

  <ul>
    <li *ngFor="let player of observableTeam | async">
      {{ player.name }}
    </li>
  </ul>

The async pipe is meant to be used with an Observable or Promise. Not an array. — yurzui
I got this error when doing ....asObservable instead of ....asObservable() on a BehaviourSubject in Angular, took me some time to find that bug. — leoncc

Sajeetharan Sajeetharan · Accepted Answer · 2018-06-04T14:52:11

Remove the async , you are returning just an array not an obserable

<li *ngFor="let player of observableTeam">
      {{ player.name }}
 </li>

and change your return type as,

 getPlayersWithObservable(): any {
    return this.fillPlayers();
  }

and

 observableTeam: <TeamInterface[]>=[]>;

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

1 Answers