Winkelausnahme: Kann nicht an 'ngForIn' 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="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">

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>

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.

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

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

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

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>

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

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

<div ngFor="let talk in talks">