例外:无法绑定到 'ngFor',因为它不是已知的原生 属性
Exception: Can't bind to 'ngFor' since it isn't a known native property
我做错了什么?
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">
我在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
.
就我而言,我犯了从文档中复制 *ng-for=
的错误。
https://angular.io/guide/user-input
如果我错了请纠正我。不过好像*ng-for=
改成了*ngFor=
对我来说,长话短说,我无意中降级到 angular-beta-16。
let ... 语法仅在 2.0.0-beta.17+
中有效
如果您尝试在此版本以下的任何内容上使用 let 语法。您将生成此错误。
升级到 angular-beta-17 或使用项目语法中的#item。
Angular2 Beta 版本中使用此语句.....
以后使用让代替#
let关键字用于声明局部变量
在我的例子中,它是一个小写字母 f
。
我分享这个答案只是因为这是 google
上的第一个结果
一定要写*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>
书的更正版本-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';
imports: [CommonModule]
也不要尝试在此使用纯 TypeScript...我想更符合 for
用法并使用 *ngFor="const filter of filters"
并得到未知的 ngFor 属性错误。只需将 const 替换为 let 即可。
正如@alexander-abakumov所说,of
被in
取代。
在我的例子中,包含使用 *ngFor 导致此错误的组件的模块未包含在 app.module.ts 中。将它包含在导入数组中为我解决了这个问题。
你应该使用 let 关键字 as 来声明局部变量
例如 *ngFor="let talk of talks"
只是为了说明我遇到相同错误的另一种情况,原因是在迭代器中使用 in 而不是 of
方法不对let file in files
正确的方法let file of files
使用这个
<div *ngFor="let talk of talks">
{{talk.title}}
{{talk.speaker}}
<p>{{talk.description}}</p>
</div>
您需要指定变量以遍历对象数组
在我的例子中,=
和"
之间应该没有space,
例如错误:
*ngFor = "let talk of talks"
对:
*ngFor="let talk of talks"
有同样的问题因为我用过
*ngFor='for let card of cards'
而不是:
*ngFor='let card of cards'
一开始有 for 就像一些“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: [...]
)}
我做错了什么?
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">
我在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
.
就我而言,我犯了从文档中复制 *ng-for=
的错误。
https://angular.io/guide/user-input
如果我错了请纠正我。不过好像*ng-for=
改成了*ngFor=
对我来说,长话短说,我无意中降级到 angular-beta-16。
let ... 语法仅在 2.0.0-beta.17+
中有效如果您尝试在此版本以下的任何内容上使用 let 语法。您将生成此错误。
升级到 angular-beta-17 或使用项目语法中的#item。
Angular2 Beta 版本中使用此语句.....
以后使用让代替#
let关键字用于声明局部变量
在我的例子中,它是一个小写字母 f
。
我分享这个答案只是因为这是 google
一定要写*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>
书的更正版本-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';
imports: [CommonModule]
也不要尝试在此使用纯 TypeScript...我想更符合 for
用法并使用 *ngFor="const filter of filters"
并得到未知的 ngFor 属性错误。只需将 const 替换为 let 即可。
正如@alexander-abakumov所说,of
被in
取代。
在我的例子中,包含使用 *ngFor 导致此错误的组件的模块未包含在 app.module.ts 中。将它包含在导入数组中为我解决了这个问题。
你应该使用 let 关键字 as 来声明局部变量 例如 *ngFor="let talk of talks"
只是为了说明我遇到相同错误的另一种情况,原因是在迭代器中使用 in 而不是 of
方法不对let file in files
正确的方法let file of files
使用这个
<div *ngFor="let talk of talks">
{{talk.title}}
{{talk.speaker}}
<p>{{talk.description}}</p>
</div>
您需要指定变量以遍历对象数组
在我的例子中,=
和"
之间应该没有space,
例如错误:
*ngFor = "let talk of talks"
对:
*ngFor="let talk of talks"
有同样的问题因为我用过
*ngFor='for let card of cards'
而不是:
*ngFor='let card of cards'
一开始有 for 就像一些“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: [...]
)}