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

286

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">
Mark Rajcok
quelle

Antworten:

644

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.

Mark Rajcok
quelle
Wofür genau ist das kaufmännische Und? Ich habe meine eigenen Probleme behoben, bin mir aber nicht sicher, was dies überhaupt bewirkt.
datatype_void
4
@datatype_void, der Hash ( #) wird verwendet, um eine lokale Vorlagenvariable
Mark Rajcok
Ich habe versucht, die "let" -Syntax anstelle des # zu verwenden, das "Kann nicht an 'ngFor' binden, da es keine bekannte native Eigenschaft ist" erzeugt. Gleiches Verhalten wie in Ihrer ursprünglichen Frage. Ich habe es wieder in # geändert und es schien ohne Probleme zu funktionieren. Ich benutze angular2.0.0-rc.1 und ich habe auch das gleiche Verhalten mit angular2.0.0-beta.17
Chadley08
1
@ Chadley08, erstelle einen Plunker. Es sollte funktionieren. Hier ist ein rc.1-Punker und ein Beta.17-Plunker , die beide gut funktionieren.
Mark Rajcok
Hier ist ein Angular-Problem über die irreführende Fehlermeldung: github.com/angular/angular/issues/10644
Alexander Taylor
79

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">
Alexander Abakumov
quelle
21

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

Naveen
quelle
13

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

Mohamed Kawsara
quelle
10

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

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

Alferd Nobel
quelle
2
Überrascht hat dies nicht mehr positive Stimmen. Ich habe völlig vergessen, CommonModule in eines meiner Module zu importieren, und bin selbst auf diesen Fehler gestoßen.
Allen Rufolo
8

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

Rsona
quelle
5

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.

Shaun
quelle
5

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=

Kris Hollenbeck
quelle
2

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

}
paulsm4
quelle
2

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.

Shamox
quelle
Mein Problem war anstelle von "von", das ich "in" verwendete
Ishimwe Aubain Consolateur
0

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.

Roy Touw
quelle
0

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

Robin Mathur
quelle
0

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

Akshay S Patil
quelle