2015-12-01 4 views
135

Was mache ich falsch?Angular-Ausnahme: Kann nicht an 'ngFor' binden, da es keine bekannte native Eigenschaft ist

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

Antwort

326

vermisste ich let vor talk:

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

Beachten Sie, dass as of beta.17 Nutzung von #... innerhalb lokalen Variablen zu deklarieren von strukturellen Richtlinien wie NgFor ist veraltet. Verwenden Sie stattdessen let.
<div *ngFor="#talk of talks"> wird jetzt <div *ngFor="let talk of talks">

Ursprüngliche Antwort:

I # vor talk verpasst:

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

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

+0

Was genau ist das kaufmännische Und für? Ich habe meine eigenen Probleme behoben, aber ich bin mir nicht sicher, was das überhaupt bewirkt. –

+3

@datatype_void, der Hash ('#') wird verwendet, um eine [lokale Vorlagenvariable] zu deklarieren (https://angular.io/docs/ts/latest/guide/template-syntax.html#!#local-vars) –

+0

Ich habe versucht, mit der "Let" -Syntax anstelle der # es produziert die "Kann nicht an 'ngFor' binden, da es keine bekannte native Eigenschaft ist". Gleiches Verhalten wie in der ursprünglichen Frage. Ich änderte es wieder in die # 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

2

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

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

mich korrigieren, wenn ich falsch bin. Aber es scheint, *ng-for= wurde geändert in *ngFor=

+0

BTW dieser Link rendert einen 404 Fehler – Drew

3

Für mich, um eine lange Geschichte kurz zu schneiden, hatte ich versehentlich zu eckigen Beta-16 heruntergestuft.

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

Wenn Sie die let Syntax auf etwas unterhalb dieser Version versuchen. Sie werden diesen Fehler erzeugen.

Aktualisieren Sie entweder auf Angular-Beta-17 oder verwenden Sie die Syntax #item in items.

9

diese Aussage in Angular2 Beta-Version verwendet .....

Jenseits Verwendung lassen Augenblick #

lassen Stichwort in lokalen Variablen

8

zu erklären, verwendet wird, mein Fall, es war ein kleiner Brief f. Ich teile diese Antwort nur, weil dies das erste Ergebnis auf Google ist

stellen Sie sicher,*ngFor

12

Ein weiterer Tippfehler auf den Fehler des OP was schreiben konnte in werden:

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

statt of:

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