admin管理员组文章数量:1423806
The error points to the *ngFor of nonvegfoodlist
appponent.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: './appponent.html',
styleUrls: ['./appponent.css']
})
export class AppComponent {
title = 'Restarunt';
vegfoodlist = veg ;
nonvegfoodlist = nonveg;
}
appponent.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
The error points to the *ngFor of nonvegfoodlist
app.ponent.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.ponent.html',
styleUrls: ['./app.ponent.css']
})
export class AppComponent {
title = 'Restarunt';
vegfoodlist = veg ;
nonvegfoodlist = nonveg;
}
app.ponent.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
- 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 Commented Nov 28, 2018 at 5:25
- see stackoverflow./questions/34012291 for more info (possible duplicate) – Marcus Commented Dec 30, 2020 at 20:52
5 Answers
Reset to default 3NgFor 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.
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>
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>
<li *ngFor ="let conten in nonvegfoodlist">
<span>{{conten.name}}</span>
</li>
I could see a typo here "Let" should be "let"
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>
本文标签：
版权声明：本文标题：javascript - my question is about Can't bind to 'ngFor' since it isn't a known property of & 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744688063a2619823.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论