CODEWITHSUNDEEP
javascripthtmlangular
Mirshad
Mirshad

Reputation: 133

my question is about Can't bind to 'ngFor' since it isn't a known property of 'li' , Why am getting this error?

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

Upvotes: 0

Views: 5756

Answers (5)

Rumes Shyaman
Rumes Shyaman

Reputation: 1082

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>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

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>

Upvotes: 1

Farhat Zaman
Farhat Zaman

Reputation: 1369

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>

Upvotes: 2

Padmapriya Vishnuvardhan
Padmapriya Vishnuvardhan

Reputation: 2166

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

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

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68685

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.

Upvotes: 3

Related Questions