ERROR Error: Cannot find a supporting differ Object '[Object Object]' of type 'Object'. Ngfor only Supports Binding to Iterables such as Arrays

Asked

Viewed 3,862 times

0

I am trying to display a list using ngFor but is 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"
         }
      ]
   }
}

method Service list:

  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: [];
}
angular

  • Dear Isa, the problem begins at ngfor, so it can be the model way as it can be just an error in ngfor, there is no way to know. If you want to display times: Ngfor may make some sense, but it has to show something related to the error. Ngfor is a feature of Angular and not of Typescript, so it is much more proof that the error is in it, or from it, but to know we need to show an example Minimum, Complete and Verifiable, read mainly the part that says "Ensure that the example actually reproduces the problem!".

1 answer

0

you have to map your answer 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 async pipe you can do so:

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

  • thank you for the reply. but from what I understood by making this code I would have only "times" but I need the data above it tbm, like "_id", "date", "dayOfWeek", etc. Not just the teams. Can you help me?

  • 1

    If the error and the following tells you that you are trying to go through an Object, and this cannot, you have to turn it into an array to be able to go through, you have 2 options but using the Eduardo code, Response=> [Response] or Response=> this.id = Response.result. _id; this.date = Sponse.result.date; this.times.Sponse.result.times

  • @Willian followed your lead, it worked and I didn’t have to miss the typing :)

  • 1

    Voce tbm could save the way it came from your backend this.data = replay, and just go through it in html data.times no for, read the times data. _id, what if you can’t run async on the object in html data?. times data?. _id, the ? places async on the object in html

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.