ERROR Error: Can not find a supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

0

I'm trying to display a list using ngFor but it's giving this error: ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Can someone tell me why?

Json:

 {  
   result:{  
      _id:"5be5c978dec9a11c0cba3d45",
      date:"2018-11-16T02:00:00.000Z",
      dayOfWeek:"Friday",
      times:[  
         {  
            name:"a",
            hourInit:"06:00",
            _id:"5be5c978dec9a11c0cba3d54"
         },
         {  
            name:"b",
            hourInit:"07:00",
            _id:"5be5c978dec9a11c0cba3d53"
         },
         {  
            name:"c",
            hourInit:"08:00",
            _id:"5be5c978dec9a11c0cba3d52"
         }
      ]
   }
}

Service list method:

  list() {
    return this.http.get<Programming[]>(this.API)
    .pipe(
      tap(console.log)
    )

  }
}

Component:

export class ProgrammingListComponent implements OnInit {
  schedules: Programming[];
  schedules$:Observable<Programming>

  constructor(private service: ProgrammingService) {}

  ngOnInit() {
    this.schedules$ = this.service.list();
  }
}

model:

export interface Programming {
  _id: number;
  date:Date;
  dayOfWeek:string;
  times: [];
}
    
asked by anonymous 21.11.2018 / 01:46

1 answer

0

You have to map your response to the array.

return this.http.get<any>(this.API) ou cria um model tipo ProgrammingResponse
    .pipe(
      map(response=>response.result.times)
      tap(console.log)
    )

Edit If your goal is to use the async pipe you can do this:

<div *ngIf="(schedules$ | async) as schedules">
<div *ngFor="let time of schedules.times">{{time}}<div>
</div>
    
21.11.2018 / 02:26