error message Cannot find a differ supporting Object '[Object Object]' of type 'Object'. Ngfor only

Asked

Viewed 3,288 times

0

I’m getting this error message;

inserir a descrição da imagem aqui

This indicating that the error is here;

<!-- INíCIO do CONTEÚDO -->
<section class="content-header">
  <h1>
    Todos os Restaurantes
  </h1>
</section>


<section class="content">

  <div class="row">
        <div *ngFor="let restaurant of restaurants" class="col-sm-6 col-xs-12">

          <mt-restaurant [restaurant]="restaurant"></mt-restaurant>

        </div>
  </div>
</section>

That’s my kind of services;

@Injectable()
export class RestaurantService {
  public url: String = 'http://localhost:3000/api/';

  constructor(private http: Http) {
  //  this.url = environment.url;
   }

   restaurants(): Observable<Restaurant[]> {
    return this.http.get(`${this.url}/restaurants`)
    .map(response => response.json())
  }

And this is my class of components;

  restaurants: Restaurant[]

  constructor(private restaurantService: RestaurantService){}

  ngOnInit() {
    this.restaurantService.restaurants()
    .subscribe(restaurants =>  this.restaurants = restaurants)
  }

What could be wrong?

angular

  • You are passing <mt-Restaurant [Restaurant]="Restaurant"></mt-Restaurant> "Restaurant" and not "Restaurants" which is your array.

  • Partner, give a console.log to your Replenisher and see what’s coming back, and tell me here, or print it so we can see the error better. Log tbem into your observable and printa

  • ps: this Http is not the angular one, but probably an HTTP service made "by hand" by the author of the question. Catch for readers...

3 answers

1


You are passing "Restaurant" and not "Restaurants" which is your array.

<mt-restaurant [restaurant]="restaurant"></mt-restaurant>

Replace with 

    <mt-restaurant [restaurant]="restaurants"></mt-restaurant>

  • Still showing the same error.

  • Can you publish the mt-Reststaurant code? How is its input? @ @Input() Reststaurant , this variable in the case

  • I just corrected the posting.

  • my complete project is here

  • https://github.com/wladyband/restaurant_MEAN/tree/master/src/app/restaurant

  • Could you take a look at me please?

  • just a minute...

  • Can you send me a print of how your json-server console is? i cloned the project here and it worked by modifying the json-server access path to public url: String = 'http://localhost:3000';

  • Let’s go continue this discussion in chat.

  • That’s not the problem

Show 5 more comments

0

It worked by making that change in the code;

  restaurants(): Observable<Restaurant[]> {
    return this.http.get(`${this.url}/restaurants`)
    .map(response => response.json().restaurants)
  }

0

The problem is that ngFor expects an array, and is receiving a Response object. The error is here:

ngOnInit() {
    this.restaurantService.restaurants()
    .subscribe(restaurants =>  this.restaurants = restaurants)
}

You get the complete object of type Response, need to indicate the body of this Response for your attribute Restaurants:

ngOnInit() {
    this.restaurantService.restaurants()
    .subscribe(restaurants =>  this.restaurants = restaurants.body)
}

I hope you solve your problem.

Browser other questions tagged angular

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