NgFor only supports binding to Iterables such as Arrays Angular 11

Question

I don't know why *ngfor gives me this error, if when I consume the API by console.log it gives me the result but I can't show it on the screen.

"here the complete error": (Cannot find a different supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.)

this is the method.

export class ProductListComponent implements OnInit {

  product: Array<CreateProductDto>;
    /*{
      id: '1',
      nombre: 'pepsi',
      peso: '12 L',
      precio: '$ 1.20',
      cantidad: '1000'
    },
    {
      id: '2',
      nombre: 'Fiora',
      peso: '1L',
      precio: '$ 2.20',
      cantidad: '3000'
    },
    {
      id: '',
      nombre: 'Coca Cola',
      peso: '14L',
      precio: '$ 0.20',
      cantidad: '2000'
    }*/
  

  constructor(private productServices: ProductService) { }

  ngOnInit(): void {
    this.getProducts()
  }

  getProducts(){
    //console.log(this.productServices.getProducts().subscribe(data => console.log(data)));
    this.productServices.getProducts().subscribe(data => {
      this.product = data
    });
  }
}

and this is my service.

export class ProductService {

  constructor( private htpp: HttpClient) { }

  getProducts(): Observable<CreateProductDto[]>{
    return this.htpp.get<CreateProductDto[]>(PathApiRes.GET_PRODUCTS);
  }


}

help me pls.

Answer 1

You can try the solution I gave here, maybe it will work for you

https://stackguides.com/questions/68553963/biding-on-a-variable-which-value-comes-from-a-service-can´t-be-seen/68556943#68556943