Was mache ich falsch?
import {bootstrap, Component} from 'angular2/angular2'
@Component({
selector: 'conf-talks',
template: `<div *ngFor="let talk in 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 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
angular
angular2-directives
Mark Rajcok
quelle
quelle
Antworten:
Da dies mindestens das dritte Mal ist, dass ich mehr als 5 Minuten mit diesem Problem verschwendet habe, dachte ich, ich würde die Fragen und Antworten veröffentlichen. Ich hoffe, es hilft jemand anderem auf der Straße ... wahrscheinlich mir!
Ich habe
in
stattof
in den ngFor-Ausdruck getippt.Vor 2-beta.17 sollte es sein:
Verwenden Sie ab Beta.17 die
let
Syntax anstelle von#
. Weitere Informationen finden Sie im UPDATE weiter unten.Beachten Sie, dass die ngFor-Syntax "Desugars" wie folgt enthält:
Wenn wir
in
stattdessen verwenden, wird es zuDa
ngForIn
es sich nicht um eine Attributanweisung mit einer gleichnamigen Eingabeeigenschaft (wiengIf
) handelt, versucht Angular zu prüfen, ob es sich um eine (bekannte native) Eigenschaft destemplate
Elements handelt, und dies ist nicht der Fall, daher der Fehler.UPDATE - Verwenden Sie ab 2-beta.17 die
let
Syntax anstelle von#
. Dies wird auf Folgendes aktualisiert:Beachten Sie, dass die ngFor-Syntax "Desugars" wie folgt enthält:
Wenn wir
in
stattdessen verwenden, wird es zuquelle
#
vor dertalk
Variablen (wie Sie sagten: "Ich hoffe, es hilft jemand anderem auf der Straße ... wahrscheinlich mir!")TL; DR;
Verwenden Sie let ... von anstatt let ... in !!
Wenn Sie Angular (> 2.x) neu sind und möglicherweise von Angular1.x Migration, wahrscheinlich sind verwirrend Sie
in
mitof
. Wie andreas hat in den Kommentaren unten erwähntfor ... of
iteriertvalues
von einem Objekt , währendfor ... in
iteriertproperties
in einem Objekt. Dies ist eine neue Funktion, die in ES2015 eingeführt wurde.Einfach ersetzen:
mit
So müssen Sie ersetzen
in
mitof
innenngFor
Richtlinie , um die Werte zu bekommen.quelle
for..in
die Schlüssel / Eigenschaftenfor...of
des Objekts iteriert werden, während die Werte des Objekts iteriert werden.for(prop in foo) {}
ist das gleiche wiefor(prop of Object.keys(foo)) {}
. Dies ist eine neue Sprachfunktion von ECMA Script 2015 / ES6. Dies ist also nur aus der Ferne ein Angular-Problem.Versuchen Sie , Import
import { CommonModule } from '@angular/common';
in Winkel endgültig als*ngFor
,*ngIf
alle in sindCommonModule
quelle
In meinem Fall wird WebStrom automatisch in Kleinbuchstaben eingefügt
*ngfor
, auch wenn es so aussieht, als würden Sie das richtige Kamelgehäuse auswählen (*ngFor
).quelle
Mein Problem war, dass Visual Studio irgendwie automatisch klein geschrieben
*ngFor
, um*ngfor
auf Copy & Paste.quelle
Es gibt eine Alternative, wenn Sie verwenden
of
und nicht wechseln möchtenin
. Sie könnenKeyValuePipe
in 6.1 eingeführt verwenden. Sie können ein Objekt leicht durchlaufen:quelle
F: Kann nicht an 'pSelectableRow' gebunden werden, da es keine bekannte Eigenschaft von 'tr' ist.
A: Sie müssen das primeng tabulemodule in ngmodule konfigurieren
quelle
Meine Lösung war - entfernen Sie einfach das Zeichen '*' aus dem Ausdruck ^ __ ^
quelle