我做错了什么?

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

我错过了就让在前面说话:

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

注意到。使用#…不建议在NgFor等结构性指令中声明局部变量。用let代替。

<div *ngFor="#talk of talks">现在变成<div *ngFor="let talk of talks">

最初的回答:

我错过了#在谈话前:

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

我们很容易忘记#。我希望Angular的异常错误消息会说:you forget that # again。


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

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

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


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

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

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

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


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

以后用let代替#

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


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

确保写*ngFor


另一个导致OP错误的拼写错误可以用在:

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

你应该用of代替:

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

我忘记用“@Input”来注释我的组件(哎呀!)

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):


也不要尝试使用纯TypeScript…我想更对应的用法和使用*ngFor="const filter of filters"和得到的ngFor不是一个已知的属性错误。只要用let替换const就可以了。

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


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


你应该使用let关键字来声明局部变量 e.g. *ngFor="让我们谈谈吧"


再讲一种情况当我得到同样的错误时原因是用in而不是in迭代器

错误的方式让文件进入文件

正确的方式让文件的文件


使用这个

<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' 而不是: *ngFor='let card of cards'

一开始就有一些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: [...]

)}