0

The error points to the *ngFor of nonvegfoodlist

app.component.ts

import { Component } from '@angular/core';
export class Menu 
{
  id : number;
  name :string;
}
const veg : Menu[] = [

  { id:1 , name:'Rice'},
  { id:2 , name:'Dosa'},
  { id:3 , name:'Biriyani'},
  {id :4 , name:'Pongal'}
];
const nonveg :Menu[] =[

  {id :5 , name:'Fish Curry'},
  {id:6, name:'Fish Fry'},
  { id:7 , name:'Half CB'}
];
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Restarunt';
  vegfoodlist = veg ;
  nonvegfoodlist = nonveg;

}

app.component.html

<html>

  <body>
  <h1>
    {{title}}
  </h1>
  <h2>Veg Food list</h2>
  <div>
  <ul class="vegfoodlist">

    <li *ngFor ="let content of vegfoodlist">
     <span>{{content.name}}</span>
    </li>
  </ul>
</div>
<div>
  <ul class=" nonvegfoodlist">
    <li *ngFor ="Let conten in  nonvegfoodlist">
      <span>{{conten.name}}</span>
    </li>
  </ul>
</div>
</body>
</html>

This is the list of errors that am getting from console:

Can't bind to 'ngFor' since it isn't a known property of 'li'

Property binding ngFor not used by any directive on an embedded template. Make >sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

These are my questions, 1) is it possible to use multiple ngFor

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
Mirshad
  • 123
  • 1
  • 3
  • 10
  • Not a solution - but a suggestion - wouldn't it be better to have a single array of food items and have a property of "type" for each - which can be veg- or non-veg.. that way its easier to maintain and you can filter it to get all items with a type of "veg" etc to create the filtered arrays for your different lists. Then you could also extend it and have an "allergen" property as well eg: contains gluten.... – gavgrif Nov 28 '18 at 05:25
  • see https://stackoverflow.com/questions/34012291 for more info (possible duplicate) – Marcus Dec 30 '20 at 20:52

5 Answers5

3

NgFor is a structural directive which is located in the CommonModule. You need to import CommonModule and add into that module where you have used NgFor.

Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
2

there is a typo mistake in *ngFor replace Let with let and second mistake is you are using Let conten in nonvegfoodlist while you can not use in in ngFor. so also need to replace in with of like this.

let conten of nonvegfoodlist

<html>

  <body>
  <h1>
    {{title}}
  </h1>
  <h2>Veg Food list</h2>
  <div>
  <ul class="vegfoodlist">

    <li *ngFor ="let content of vegfoodlist">
     <span>{{content.name}}</span>
    </li>
  </ul>
</div>
<div>
  <ul class=" nonvegfoodlist">
    <li *ngFor ="let conten of  nonvegfoodlist">
      <span>{{conten.name}}</span>
    </li>
  </ul>
</div>
</body>
</html>
Farhat Zaman
  • 1,339
  • 10
  • 20
1

typo mistake, you need to use let instead of Let

<ul class=" nonvegfoodlist">
    <li *ngFor ="let conten of nonvegfoodlist">
      <span>{{conten.name}}</span>
    </li>
  </ul>
Hiren Vaghasiya
  • 5,454
  • 1
  • 11
  • 25
0
 <li *ngFor ="let conten in  nonvegfoodlist">
      <span>{{conten.name}}</span>
    </li>

I could see a typo here "Let" should be "let"

Padmapriya Vishnuvardhan
  • 2,090
  • 13
  • 16
0

Just a typo make it as

<li *ngFor ="let content of vegfoodlist"> <span>{{content.name}}</span> </li>

and

<li *ngFor ="let conten of nonvegfoodlist"> <span>{{conten.name}}</span> </li>

Rumes Shyaman
  • 1,072
  • 1
  • 15
  • 30