Excepción angular: no se puede vincular a 'ngForIn' ya que no es una propiedad nativa conocida

¿Qué estoy haciendo mal?

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

El error es

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

Como esta es al menos la tercera vez que malgasto más de 5 minutos en este problema, pensé que publicaría las preguntas y respuestas. Espero que ayude a alguien más en el camino ... ¡probablemente a mí!

He escrito inen lugar de ofen la expresión ngFor.

Antes de 2-beta.17 , debería ser:

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

A partir de beta.17, use la letsintaxis en lugar de #. Vea la ACTUALIZACIÓN más abajo para más información.

Tenga en cuenta que la sintaxis ngFor "se desugará" en lo siguiente:

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

Si usamos en su inlugar, se convierte en

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

Dado ngForInque no es una directiva de atributo con una propiedad de entrada del mismo nombre (como ngIf), Angular intenta ver si es una propiedad (nativa conocida) del templateelemento, y no lo es, de ahí el error.

ACTUALIZACIÓN : a partir de 2-beta.17, use la letsintaxis en lugar de #. Esto se actualiza a lo siguiente:

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

Tenga en cuenta que la sintaxis ngFor "se desugará" en lo siguiente:

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

Si usamos en su inlugar, se convierte en

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

TL; DR;

Use let ... of en lugar de let ... in !!

Si eres nuevo en angular (> 2.x) y, posiblemente, la migración de Angular1.x, más probable es que estás confundiendo incon of. Como Andreas ha mencionado en los comentarios a continuación for ... ofitera sobre values de un objeto mientras se for ... initera sobre properties en un objeto. Esta es una nueva característica introducida en ES2015.

Simplemente reemplace:

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

Por lo tanto, debe reemplazar incon laofngFor directiva interna para obtener los valores.

Intenta importar import { CommonModule } from '@angular/common';en la final angular que *ngFor, *ngIftodos están presentes enCommonModule

En mi caso, WebStrom autocompletado insertado en minúsculas *ngfor, incluso cuando parece que eliges el camello correcto ( *ngFor).

Mi problema fue que Visual Studio de alguna manera se minúscula automáticamente *ngForal *ngforcopiar y pegar.

Hay una alternativa si desea usar ofy no cambiar a in. Se puede usar KeyValuePipeintroducido en 6.1. Puede iterar fácilmente sobre un objeto:

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

P: No se puede vincular a 'pSelectableRow' ya que no es una propiedad conocida de 'tr'.

R: debe configurar el primeng tabulemodule en ngmodule

mi solución fue: simplemente elimine el carácter '*' de la expresión ^ __ ^

<div ngFor="let talk in talks">