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

Question

我究竟做错了什么？

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">

Answer 1

我错过了let前面talk ：

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

---

请注意， 从 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 。

Answer 2

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

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

您应该使用of ，而不是：

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

Answer 3

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

以后使用let而不是#

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

Answer 4

在 angular 7 中通过将这些行添加到.module.ts文件来解决.module.ts ：

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

Answer 5

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

确保写*ngFor

Answer 6

您应该使用 let 关键字 as 来声明局部变量，例如 *ngFor="let talk of talk"

Answer 7

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

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

如果我错了，请纠正我。 但似乎*ng-for=已更改为*ngFor=

Answer 8

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

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

如果您在此版本以下的任何内容上尝试 let 语法。 您将生成此错误。

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

Answer 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() {}

}

Answer 10

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

正如@alexander-abakumov 所说的，将of替换为in 。

Answer 11

只是为了掩饰，当我得到同样的错误，究其原因是在迭代器使用，而不是更多的情况

错误的方式let file in files

正确的方式let file of files

Answer 12

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

Answer 13

用这个

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

您需要指定变量来迭代对象数组

Answer 14

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

例如错误：

*ngFor = "let talk of talks"

对 ：

*ngFor="let talk of talks"

Answer 15

有同样的问题，因为我用过
*ngFor='for let card of cards'
代替：
*ngFor='let card of cards'

一开始就有for就像一些“for循环”一样，这里是错误的
它有效，但有错误

Answer 16

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

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

代替

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

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

Answer 17

嘿，对我来说，组件在导入后没有正确导入到app.module.ts文件中，一切正常

@NgModule({ 声明：[ YourComponent, OtherComponents ],

imports: [...]

)}