例外：无法绑定到 '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

我在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.

Answer 2

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

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

如果我错了请纠正我。不过好像*ng-for=改成了*ngFor=

Answer 3

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

let ... 语法仅在 2.0.0-beta.17+

中有效

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

升级到 angular-beta-17 或使用项目语法中的#item。

Answer 4

Angular2 Beta 版本中使用此语句.....

以后使用让代替#

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

Answer 5

在我的例子中，它是一个小写字母 f。我分享这个答案只是因为这是 google

上的第一个结果

一定要写*ngFor

Answer 6

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

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

您应该改用 of：

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

Answer 7

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

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>

书的更正版本-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 8

在 angular 7 中通过将这些行添加到 .module.ts 文件来修复此问题：

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

Answer 9

也不要尝试在此使用纯 TypeScript...我想更符合 for 用法并使用 *ngFor="const filter of filters" 并得到未知的 ngFor 属性错误。只需将 const 替换为 let 即可。

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

Answer 10

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

Answer 11

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

Answer 12

只是为了说明我遇到相同错误的另一种情况，原因是在迭代器中使用 in 而不是 of

方法不对let file in files

正确的方法let file of files

Answer 13

使用这个

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

您需要指定变量以遍历对象数组

Answer 14

在我的例子中，=和"之间应该没有space，

例如错误：

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

用 'let' 声明后它对我有用。

Answer 17

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

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

)}

例外：无法绑定到 'ngFor'，因为它不是已知的原生属性

Exception: Can't bind to 'ngFor' since it isn't a known native property

angular

typescript

angular2-directives

ngfor

例外：无法绑定到 'ngFor'，因为它不是已知的原生 属性

Exception: Can't bind to 'ngFor' since it isn't a known native property

angular

typescript

angular2-directives

ngfor

例外：无法绑定到 'ngFor'，因为它不是已知的原生属性