337

What am I doing wrong?

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, [])

The error is

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

17 回答 17

742

我错过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.

于 2015-12-01T03:52:41.713 回答
91

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

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

您应该of改用：

<div *ngFor="let talk of talks">
于 2017-09-13T21:12:11.453 回答
21

Angular2 Beta 版中使用的这个语句......

以后用let代替#

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

于 2016-10-20T20:00:38.117 回答
17

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

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

于 2019-06-25T02:44:51.060 回答
13

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

确保写 *ngFor

于 2017-02-04T16:43:54.667 回答
8

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

于 2019-10-10T09:24:32.817 回答
5

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

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

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

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

于 2016-05-24T00:59:16.563 回答
5

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

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

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

于 2016-02-25T16:52:30.110 回答
3

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

错误的方法 let file in files

正确的方式let file of files

于 2020-04-19T09:04:57.010 回答
3

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

正如@alexander-abakumov 所说，of替换为in.

于 2019-07-06T16:46:21.693 回答
3

我忘了用“ @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() {}

}
于 2019-01-18T00:39:54.510 回答
1

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

于 2019-08-28T13:16:47.593 回答
1

=在我的情况下，和之间不应该有空格"，

例如错误：

*ngFor = "let talk of talks"

正确的 ：

*ngFor="let talk of talks"
于 2021-04-05T11:50:13.127 回答
1

用这个

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

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

于 2020-06-06T04:50:51.140 回答
0

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

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

代替

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

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

于 2021-11-21T21:09:16.607 回答
0

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

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

于 2021-09-02T05:14:13.283 回答
0

对我来说，组件未正确导入app.module.ts文件中。导入后一切正常

@NgModule({
    declarations: [
      YourComponent,
      OtherComponents
    ],
    
    imports: [...]

)}
于 2022-01-11T00:19:44.947 回答