Eccezione angolare: impossibile associare 'ngForIn' poiché non è una proprietà nativa nota

Che cosa sto facendo di sbagliato?

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, [])

L'errore è

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">

Dato che questa è almeno la terza volta che ho perso più di 5 minuti su questo problema, ho pensato di pubblicare le domande e risposte. Spero che possa aiutare qualcun altro lungo la strada ... probabilmente io!

Ho digitato inanziché ofnell'espressione ngFor.

Prima di 2-beta.17 , dovrebbe essere:

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

A partire da beta.17, utilizzare la letsintassi anziché #. Vedi AGGIORNAMENTO più in basso per maggiori informazioni.

Si noti che la sintassi ngFor "desugars" nel seguente:

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

Se ininvece lo utilizziamo , si trasforma in

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

Poiché ngForInnon è una direttiva di attributo con una proprietà di input con lo stesso nome (like ngIf), Angular quindi cerca di vedere se si tratta di una proprietà (nota nativa) templatedell'elemento e non lo è, quindi l'errore.

AGGIORNAMENTO : a partire da 2-beta.17, utilizzare la letsintassi anziché #. Questo si aggiorna a quanto segue:

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

Si noti che la sintassi ngFor "desugars" nel seguente:

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

Se ininvece lo utilizziamo , si trasforma in

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

TL; DR;

Usa let ... of invece di let ... in !!

Se siete nuovi a angolare (> 2.x) e, eventualmente, la migrazione da Angular1.x, molto probabilmente stai confondendo incon of. Andreas ha accennato nei commenti qui sotto for ... ofitera su values di un oggetto mentre for ... initera su properties di un oggetto. Questa è una nuova funzionalità introdotta in ES2015.

Sostituisci semplicemente:

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

con

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

Quindi, è necessario sostituire incon laofngFor direttiva inside per ottenere i valori.

Provare a importare import { CommonModule } from '@angular/common';in finale angolare *ngFor, *ngIftutti sono presenti inCommonModule

Nel mio caso, il completamento automatico di WebStrom è inserito in caratteri minuscoli *ngfor, anche quando sembra che tu scelga quello con il cammello giusto ( *ngFor).

Il mio problema era, che Visual Studio in qualche modo automaticamente caratteri minuscoli *ngFor per *ngforil copia & incolla.

C'è un'alternativa se si desidera utilizzare ofe non passare a in. È possibile utilizzare KeyValuePipeintrodotto in 6.1. Puoi iterare facilmente su un oggetto:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Q: Impossibile associare 'pSelectableRow' poiché non è una proprietà nota di 'tr'.

A: devi configurare il tabulemodule primeng in ngmodule

la mia soluzione era: basta rimuovere il carattere '*' dall'espressione ^ __ ^

<div ngFor="let talk in talks">