I'm almost resigning myself. I have this problem which I cannot solve. For my first project in angular, I ran into the following error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Array

Basically I created a service that calls an external json file In the service I put these methods:

export class PiattiService {

  url="https://mywebsite.eccc/db.json";
  constructor(private http:HttpClient) { }




  get():Observable<Piatto[]>{
    return this.http.get<Piatto[]>(this.url);
  }

I created an interface class by declaring the fields equivalent to the json file I get

export class Piatto{
  id:number;
  titolo:string;
  image:string;
  label:string;
  prezzo:string;
  categoria:string;
  inevidenza:string;
  commenti:string;
}

In the COMPONENT TS file I call this service as follows:

export class MostrapiattiComponent implements OnInit {

  piatti:Piatto[];
 

  constructor(private http:HttpClient, private servizioPiatti:PiattiService) { }




  ngOnInit() {
      this.servizioPiatti.get().subscribe((osserva)=>{
      this.piatti=osserva;
    })
  }

}

In the html file I try and iterate everything from *ngfor

<tr *ngFor="let piatto of piatti ">
    <td>{{piatto.id}}</td><td>{{piatto.titolo}}</td>
  </tr>

But it goes wrong

CodePudding user response：

You need to initialize piatti:Piatto[] with an empty array.

piatti:Piatto[]=[];

and you need to update the HTTP call as well because it is not returning array.

return this.http.get<Piatto[]>(this.url).pipe(map(res=>res.piatti))

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I Have Solved. Thank you for all