Ausnahme: Kann nicht an 'ngFor' gebunden werden, da es sich nicht um eine bekannte native Eigenschaft handelt

Was mache ich falsch?

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

Der Fehler ist

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

Ich vermisste letvor talk:

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

Beachten Sie, dass ab Beta.17 die Verwendung von #...zum Deklarieren lokaler Variablen innerhalb von Strukturanweisungen wie NgFor veraltet ist. Verwenden Sie letstattdessen.

<div *ngFor="#talk of talks"> jetzt wird <div *ngFor="let talk of talks">

Ursprüngliche Antwort:

Ich vermisste #vor talk:

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

Es ist so leicht, das zu vergessen #. Ich wünschte, die Angular Exception-Fehlermeldung würde stattdessen sagen :
you forgot that # again.

Ein weiterer Tippfehler, der zum Fehler des OP führt, könnte sein in:

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

Sie sollten ofstattdessen verwenden:

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

Diese Anweisung wird in der Angular2 Beta-Version verwendet .....

Verwenden Sie im Folgenden let anstelle von #

Das Schlüsselwort let wird verwendet, um die lokale Variable zu deklarieren

In meinem Fall war es ein kleiner Brief f. Ich teile diese Antwort nur, weil dies das erste Ergebnis bei Google ist

Stellen Sie sicher, dass Sie schreiben *ngFor

In Winkel 7 wurde dies behoben, indem die folgenden Zeilen zur .module.tsDatei hinzugefügt wurden :

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

Sie sollten das Schlüsselwort let verwenden, um lokale Variablen zu deklarieren, z. B. * ngFor = "Über Gespräche sprechen lassen"

Um es kurz zu machen, ich hatte versehentlich auf Angular-Beta-16 herabgestuft.

Die let ... -Syntax ist NUR in 2.0.0-beta.17 + gültig

Wenn Sie die let-Syntax für etwas unterhalb dieser Version ausprobieren. Sie werden diesen Fehler erzeugen.

Aktualisieren Sie entweder auf Angular-Beta-17 oder verwenden Sie das #item in der Elementsyntax.

In meinem Fall habe ich den Fehler gemacht, zu kopieren *ng-for= aus den Dokumenten zu .

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

Korrigieren Sie mich, wenn ich falsch liege. Aber es scheint *ng-for=geändert worden zu sein*ngFor=

Ich habe vergessen, meine Komponente mit " @Input " (Doh!) Zu versehen.

book-list.component.html (beleidigender Code):

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

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

}

Versuchen Sie auch nicht, reines TypeScript zu verwenden ... Ich wollte mehr der forVerwendung und Verwendung entsprechen *ngFor="const filter of filters"und habe das ngFor nicht als bekannten Eigenschaftsfehler erhalten. Nur const durch let zu ersetzen, funktioniert.

Wie @ alexander-abakumov sagte für die ofersetzt durch in.

In meinem Fall war das Modul, das die Komponente enthält, die * ngFor verwendet, was zu diesem Fehler führte, nicht in app.module.ts enthalten. Das Einfügen dort in das Import-Array hat das Problem für mich behoben.

Nur um einen weiteren Fall abzudecken , wenn ich die gleichen Fehler und der Grund , wurde mit in statt der in Iterator

Falscher Weg let file in files

Der richtige Weg let file of files

Benutze das

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

Sie müssen eine Variable angeben, um über ein Array eines Objekts zu iterieren