例外:不能绑定到'ngFor'因为它不是一个已知的本地财产

我做错了什么?

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">
214957 次浏览
小开
最佳答案

我在talk前面漏掉了let:

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

#. c是如此容易忘记。我希望Angular的异常错误消息是:
you forgot that # again。

小开

在我的例子中，我犯了从文档中复制*ng-for=的错误。

< a href = " https://angular。Io /guide/user-input" rel="nofollow noreferrer">https://angular.io/guide/user-input

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

小开

对我来说，长话短说，我无意中降到了角- β -16。

让…语法只在2.0.0-beta.17+中有效

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

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

小开

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

以后使用让代替＃

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

小开

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

的第一个结果

一定要写 *ngFor

小开

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

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

你应该使用of来代替:

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

我忘记用“@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>

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


}
小开

在angular 7中，通过向.module.ts文件中添加这些行来解决这个问题:

import {CommonModule} from '@angular/common'; 进口(CommonModule): < /代码> < / p >

小开

也不要尝试使用纯TypeScript…我想更多地对应for的用法，并使用*ngFor="const filter of filters"，得到了ngFor未知属性错误。只要用let替换const就可以了。

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

小开

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

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

.
小开

只是为了覆盖另一种情况，当我得到同样的错误，原因是在迭代器中使用在而不是的

错误的方式

正确的方法let file of files

小开

使用这个

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

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

小开

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

错误的:

*ngFor = "let talk of talks"

正确的:

*ngFor="let talk of talks"
小开
有同样的问题，因为我使用了
*ngFor='for let card of cards' < br > 而不是:< br > *ngFor='let card of cards' < br > < / p >

开头有为，就像一些“for循环”的语句，这是错误的
它工作，但有错误

小开

在我的例子中，我没有在for循环中声明循环变量

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

而不是

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

在声明了“let”之后，它就对我有用了。

小开

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

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

imports: [...]


)}

提交答案