Angular6 Error: Cannot find a differ supporting object 'cuisine' of type 'string'. NgFor only supports binding to Iterables such as Arrays

1
votes

Please Help this error. I'm stuck with this error, I'm using angular6

Error: Cannot find a differ supporting object 'cuisine' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Code:

// category.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
  Categories$: Object;
  page:number=0;

  constructor(private route: ActivatedRoute, private data: DataService) {
      this.route.params.subscribe(
        params => this.Categories$ = params.category
      );
   }

  ngOnInit() {
    this.data.getCategory(this.Categories$).subscribe(
      data => this.Categories$ = data["data"].restaurantCategories
      // data => console.log(data["data"].restaurantCategories)
    )


  }

}

View File

 <ng-container class="post_data_container" *ngFor="let cat of Categories$">
        <ul class="restaurant_container">
            <li style="float: left;">
             <img src="{{ cat.imageURL }}" alt="">
             <p>Name: {{ cat.name }}</p>
             <p>Category: {{ cat.category }}</p>
             <p>Description: {{ cat.description }}</p>
            <button class="btn btn-success"><a routerLink="/restaurant/category/name/{{cat._id}}" style="color: #fff;">click test</a></button>
            </li>
         </ul>
    </ng-container>

Here's my Data Service:

  getCategory(categoryData){
    return this.http.get('http://192.168.1.100:3001/api/restaurant/categories/'+categoryData)
  }
2
angularangular6

2 Answers

1
votes

I think the problem is this params => this.Categories$ = params.category. this.Categories$ is a string here, thus provoking the error as you reuse it later. Separate the two : create another variable for params.category and define this.Categories$ as an array. That should work.

Update

// category.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
  Categories$: Array<any> = [];
  category = any; // or string or number
  page:number=0;

  constructor(private route: ActivatedRoute, private data: DataService) {
      this.route.params.subscribe(
        params => this.category = params.category
      );
   }

  ngOnInit() {
    this.data.getCategory(this.category).subscribe(
      data => this.Categories$ = data["data"].restaurantCategories
      // data => console.log(data["data"].restaurantCategories)
    )


  }

}

Assuming, of course, that the result of data["data"].restaurantCategories is an array. Just a few advice : don't use uppercase at the beginning of a variable. Also, the $ at the end of a variable is better kept only on the Observable datas (or not used at all).

1
votes

Actually the issue with the usage of same variable Categories$ to stores the category and categories information. You must use the separate variables for category and categories.

Modified version of your code -

ts

// category.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/data.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.css']
})
export class CategoryComponent implements OnInit {
  Categories$: Object;
  category; //<--category from param
  page:number=0;

  constructor(private route: ActivatedRoute, private data: DataService) {
      this.route.params.subscribe(
        params => this.category = params.category <-- category is set
      );
   }

  ngOnInit() {
    this.data.getCategory(this.category).subscribe( //<-- Categories$ to  category
      data => this.Categories$ = data["data"].restaurantCategories
      // data => console.log(data["data"].restaurantCategories)
    )

  }

}

Note : the code is written the stackoverflow editor directly so there could be typo or syntactical error. Please correct it yourself.