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

355

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">
Mark Rajcok
quelle
3
versuchen , dies zu ändern <div * ngFor = "lassen Vortrag in Gesprächen"> , um das <div * ngFor = "lassen die Rede von Gesprächen"> Anmerkung: "in" zu "von"
Ishimwe Aubain Consolateur
Ich denke, Sie haben einen C # / Java-Hintergrund. Ich habe den gleichen Fehler gemacht, in anstelle von Of
Abhay Dhar zu verwenden.

Antworten:

699

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 instatt ofin den ngFor-Ausdruck getippt.

Vor 2-beta.17 sollte es sein:

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

Verwenden Sie ab Beta.17 die letSyntax anstelle von #. Weitere Informationen finden Sie im UPDATE weiter unten.


Beachten Sie, dass die ngFor-Syntax "Desugars" wie folgt enthält:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

Wenn wir instattdessen verwenden, wird es zu

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

Da ngForInes sich nicht um eine Attributanweisung mit einer gleichnamigen Eingabeeigenschaft (wie ngIf) handelt, versucht Angular zu prüfen, ob es sich um eine (bekannte native) Eigenschaft des templateElements handelt, und dies ist nicht der Fall, daher der Fehler.

UPDATE - Verwenden Sie ab 2-beta.17 die letSyntax anstelle von #. Dies wird auf Folgendes aktualisiert:

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

Beachten Sie, dass die ngFor-Syntax "Desugars" wie folgt enthält:

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

Wenn wir instattdessen verwenden, wird es zu

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
Mark Rajcok
quelle
7
Und ja, erinnern Sie sich an die #vor der talkVariablen (wie Sie sagten: "Ich hoffe, es hilft jemand anderem auf der Straße ... wahrscheinlich mir!")
Nobita
2
@Nobita, ja, das hat mich genauso oft gestolpert. Ich schrieb auch ein Q & A für dieses: stackoverflow.com/questions/34012291/…
Mark Rajcok
2
so stinkend offensichtlich, wenn man merkt ... Ich finde es wirklich kontraintuitiv, so gewöhnt an For-In-Stil. Ich würde beide Ihre Q & A-Beiträge mehr abstimmen, wenn ich könnte, danke
Pete
1
Danke Mark. Es ist nicht die größte Fehlermeldung - wie WTF "ngForIn" bedeuten soll!? Aber im Nachhinein, duh! Ich habe ungefähr 20 Minuten damit gerungen, bevor ich Ihre Fragen und Antworten gefunden habe.
Methodiker
2
Ich bin damit einverstanden, dass die Antwort beides haben sollte. Aber ich habe die Antwort weiter aktualisiert, um klarer zu machen, dass die Syntax nach Beta.17 anders ist. (Ich habe aufgehört, mich darum zu tauschen, damit der neueste zuerst kommt). Stattdessen habe ich nur eine kleine Notiz eingefügt. Auf den ersten Blick erkennt ein Neuling möglicherweise nicht die neueste Syntax. Es ist eine kleine Änderung, macht aber einen großen Unterschied
redfox05
288

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 inmit of. Wie andreas hat in den Kommentaren unten erwähnt for ... ofiteriert values von einem Objekt , während for ... initeriert properties in einem Objekt. Dies ist eine neue Funktion, die in ES2015 eingeführt wurde.

Einfach ersetzen:

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

mit

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

So müssen Sie ersetzen inmitof innen ngForRichtlinie , um die Werte zu bekommen.

Mamsoudi
quelle
2
Nebenbei bemerkt - kennt jemand den Grund für die Verwendung von "von", "in" scheint hier eine natürlichere Wahl zu sein.
Morvael
2
@mamsoudi @Morvael Der Unterschied besteht darin, dass for..indie Schlüssel / Eigenschaften for...ofdes Objekts iteriert werden, während die Werte des Objekts iteriert werden. for(prop in foo) {}ist das gleiche wie for(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.
Andreas Baumgart
Dies ist, was passiert, wenn Sie seit Jahren in C # codieren und dann zu
Angular
der Lösung funktioniert richtig, danke
ohne einen
13

Versuchen Sie , Import import { CommonModule } from '@angular/common';in Winkel endgültig als *ngFor, *ngIfalle in sindCommonModule

Rohitesh
quelle
Ich würde denken, dass diese Antwort heutzutage der häufigste Grund ist, den Fehler im OP-Titel zu erhalten.
G. Stoynev
11

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

Eran Shabi
quelle
6

Mein Problem war, dass Visual Studio irgendwie automatisch klein geschrieben *ngFor , um *ngforauf Copy & Paste.

Tomino
quelle
1

Es gibt eine Alternative, wenn Sie verwenden ofund nicht wechseln möchten in. Sie können KeyValuePipein 6.1 eingeführt verwenden. Sie können ein Objekt leicht durchlaufen:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
सत्यमेव जयते
quelle
-3

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

user9838309
quelle
-15

Meine Lösung war - entfernen Sie einfach das Zeichen '*' aus dem Ausdruck ^ __ ^

<div ngFor="let talk in talks">
Unkas
quelle