我的问题是关于 Can't bind to 'ngFor' 因为它不是 'li' 的已知属性，为啥会出现此错误？

Posted

技术标签:

【中文标题】我的问题是关于 Can\'t bind to \'ngFor\' 因为它不是 \'li\' 的已知属性，为啥会出现此错误？【英文标题】：my question is about Can't bind to 'ngFor' since it isn't a known property of 'li' , Why am getting this error?我的问题是关于 Can't bind to 'ngFor' 因为它不是 'li' 的已知属性，为什么会出现此错误？ 【发布时间】：2019-04-29 22:58:03 【问题描述】：

错误指向 nonvegfoodlist 的 *ngFor

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>

这是从控制台得到的错误列表：

无法绑定到“ngFor”，因为它不是“li”的已知属性

属性绑定 ngFor 未被嵌入模板上的任何指令使用。 >确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中。

这些是我的问题， 1）是否可以使用多个ngFor

【问题讨论】：

不是一个解决方案 - 而是一个建议 - 拥有一个单一的食物数组并为每个食物具有“类型”属性不是更好吗 - 可以是蔬菜或非蔬菜..这样更容易维护，您可以对其进行过滤以获取所有具有“蔬菜”类型的项目等，从而为您的不同列表创建过滤后的数组。然后你也可以扩展它并具有“过敏原”属性，例如：包含面筋...... 查看***.com/questions/34012291了解更多信息（可能重复） 【参考方案1】：

只是一个错字就写成

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

和

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

【讨论】：

【参考方案2】：

错别字，你需要用let代替Let

<ul class=" nonvegfoodlist">
    <li *ngFor ="let conten of nonvegfoodlist">
      <span>conten.name</span>
    </li>
  </ul>

【讨论】：

【参考方案3】：

*ngFor 中有一个拼写错误，将Let 替换为let，第二个错误是您使用的是Let conten in nonvegfoodlist，而您不能在ngFor 中使用in。所以也需要像这样用of替换in。

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>

【讨论】：

【参考方案4】： 
 <li *ngFor ="let conten in  nonvegfoodlist">
      <span>conten.name</span>
    </li>

我可以在这里看到一个错字“让”应该是“让”

【讨论】：

【参考方案5】：

NgFor 是一个结构指令，位于CommonModule 中。您需要导入CommonModule 并添加到您使用过NgFor 的模块中。

【讨论】：

以上是关于我的问题是关于 Can't bind to 'ngFor' 因为它不是 'li' 的已知属性，为啥会出现此错误？的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS 中{{}}与ng-bind指令

使用angularJS解析ng-bind中的html [重复]

Can't find mysqld.sock: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.s

Can't exit loop in Deaf Grandma from Learn to Program by Chris Pine

使用 ng-bind-html 来自 Angular Array 的 iframe 视频

AWS CodeBuild - cd: can't cd to /codebuild/output/src... 错误和未找到工件路径