例外：无法绑定到“ngFor”，因为它不是已知的本机属性

Posted 2023-02-22

【中文标题】例外：无法绑定到“ngFor”，因为它不是已知的本机属性

【英文标题】：Exception: Can't bind to 'ngFor' since it isn't a known native property

【发布时间】：2016-03-04 21:31:32

【问题描述】：

我做错了什么？

import bootstrap, Component from 'angular2/angular2'

@Component(
  selector: 'conf-talks',
  template: `<div *ngFor="talk of talks">
     talk.title by talk.speaker
     <p>talk.description
   </div>`
)
class ConfTalks 
  talks = [ title: 't1', speaker: 'Brian', description: 'talk 1',
            title: 't2', speaker: 'Julie', description: 'talk 2'];

@Component(
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
)
class App 
bootstrap(App, [])

错误是

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

【参考方案1】：

我在talk前面错过了let：

<div *ngFor="let talk of talks">

---

请注意，as of beta.17 使用 #... 在 NgFor 等结构指令中声明局部变量已被弃用。请改用let。

<div *ngFor="#talk of talks"> 现在变为<div *ngFor="let talk of talks">

原答案：

我在talk前面错过了#：

<div *ngFor="#talk of talks">

很容易忘记#。我希望 Angular 异常错误消息改为：you forgot that # again。

【讨论】：

& 符号到底是干什么用的？我解决了自己的问题，但我不确定这到底能做什么。

@datatype_void，哈希（#）用于声明local template variable

我尝试使用“let”语法而不是 # 它产生“无法绑定到 'ngFor'，因为它不是已知的本机属性”。与您在原始问题中看到的行为相同。我把它改回了#，它似乎没有任何问题。我正在使用 angular2.0.0-rc.1，我也得到了与 angular2.0.0-beta.17 相同的行为

@Chadley08，创建一个 plunker。它应该工作。这是rc.1 punker 和beta.17 plunker，两者都可以正常工作。

这是一个关于错误消息具有误导性的 Angular 问题：github.com/angular/angular/issues/10644

【参考方案2】：

导致 OP 错误的另一个错字可能是使用 in:

<div *ngFor="let talk in talks">

您应该改用of：

<div *ngFor="let talk of talks">

【参考方案3】：

此语句用于 Angular2 Beta 版.....

以后用 let 代替 #

let 关键字用于声明局部变量

【参考方案4】：

在 Angular 7 中，通过将这些行添加到 .module.ts 文件来解决此问题：

import CommonModule from '@angular/common'; imports: [CommonModule]

【讨论】：

很惊讶这没有更多的赞成票。完全忘记在我的一个模块中导入 CommonModule 并自己遇到了这个错误。

【参考方案5】：

就我而言，它是一个小写字母f。 我分享这个答案只是因为这是谷歌上的第一个结果

一定要写*ngFor

【参考方案6】：

你应该使用 let 关键字 as 来声明局部变量 例如 *ngFor="谈一谈"

【参考方案7】：

对我来说，长话短说，我无意中降级到了 angular-beta-16。

let ... 语法仅在 2.0.0-beta.17+ 中有效

如果你在低于这个版本的任何东西上尝试 let 语法。你会产生这个错误。

升级到 angular-beta-17 或使用 #item in items 语法。

【参考方案8】：

就我而言，我犯了从文档中复制*ng-for= 的错误。

https://angular.io/guide/user-input

如果我错了，请纠正我。但是好像*ng-for=已经改成了*ngFor=

【参考方案9】：

我忘记用“@Input”注释我的组件（Doh！）

book-list.component.html（违规代码）：

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

book-item.component.ts的更正版本：

import  Component, OnInit, Input  from '@angular/core';

import  Book  from '../model/book';
import  BookService  from '../services/book.service';

@Component(
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
)
export class BookItemComponent implements OnInit 

  @Input()
  public book: Book;

  constructor(private bookService: BookService)   

  ngOnInit() 

【参考方案10】：

也不要尝试在此使用纯 TypeScript... 我想更多地对应 for 用法并使用 *ngFor="const filter of filters" 并得到 ngFor not a known property 错误。只需将 const 替换为 let 即可。

正如@alexander-abakumov 所说，of 被 in 取代。

【讨论】：

我的问题是我使用“in”而不是“of”

【参考方案11】：

当我遇到同样的错误并且原因是在迭代器中使用 in 而不是 of 时，只是为了涵盖另外一种情况

错误的方式let file in files

正确方式let file of files

【参考方案12】：

在我的情况下，包含使用 *ngFor 的组件的模块导致此错误，未包含在 app.module.ts 中。将它包含在导入数组中为我解决了这个问题。

【参考方案13】：

使用这个

<div *ngFor="let talk of talks> 
   talk.title 
   talk.speaker
   <p>talk.description 
</div>

你需要指定变量来迭代一个对象的数组

【讨论】：

你的代码有错别字，需要关闭"

【参考方案14】：

就我而言，= 和 " 之间应该没有空格，

例如错了：

*ngFor = "let talk of talks"

正确：

*ngFor="let talk of talks"

【参考方案15】：

遇到同样的问题，因为我用过 *ngFor='for let card of cards' 而不是：*ngFor='let card of cards'

在开始时有 for，就像一些“for 循环”在这里是错误的 它工作，但有错误

【参考方案16】：

在我的情况下，我没有在我拥有的 for 循环中声明循环变量

<div *ngFor="pizza of pizzas; index as i">

而不是

<div *ngFor="let pizza of pizzas; index as i">

在用“让”声明它之后，它对我有用。