Exceção angular: não é possível vincular a 'ngForIn', pois não é uma propriedade nativa conhecida

O que estou fazendo errado?

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

O erro é

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 essa é a terceira vez que desperdicei mais de 5 minutos com esse problema, imaginei postar as perguntas e respostas. Espero que ajude outra pessoa no caminho ... provavelmente eu!

Eu digitei inem vez de ofna expressão ngFor.

Antes de 2-beta.17 , deve ser:

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

A partir do beta.17, use a letsintaxe em vez de #. Veja a atualização mais abaixo para obter mais informações.

Observe que a sintaxe ngFor "desugars" no seguinte:

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

Se usarmos em invez disso, ele se transforma em

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

Como ngForInnão é uma diretiva de atributo com uma propriedade de entrada com o mesmo nome (como ngIf), o Angular tenta ver se é uma propriedade (nativa conhecida) do templateelemento, e não é, portanto, o erro.

UPDATE - a partir de 2-beta.17, use a letsintaxe em vez de #. Isso atualiza para o seguinte:

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

Observe que a sintaxe ngFor "desugars" no seguinte:

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

Se usarmos em invez disso, ele se transforma em

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

TL; DR;

Use let ... em vez de let ... in !!

Se você é novo para Angular (> 2.x) e, possivelmente, migrando de Angular1.x, provavelmente você está confundindo incom of. Como Andreas mencionou nos comentários abaixo for ... ofitera sobre values de um objecto, enquanto for ... initera sobre properties em um objeto. Este é um novo recurso introduzido no ES2015.

Simplesmente substitua:

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

com

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

Portanto, você deve substituir inpelaofngFor diretiva interna para obter os valores.

Tente importar import { CommonModule } from '@angular/common';em final angular *ngFor, pois *ngIftodos estão presentes emCommonModule

No meu caso, o WebStrom preenche automaticamente as letras minúsculas *ngfor, mesmo quando parece que você escolhe o camelo certo ( *ngFor).

Meu problema era que o Visual Studio, de alguma forma, automaticamente em minúsculas *ngFor para *ngforcopiar e colar.

Existe uma alternativa se você deseja usar ofe não mudar para in. Você pode usar o KeyValuePipeintroduzido no 6.1. Você pode facilmente iterar sobre um objeto:

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

P: Não é possível vincular a 'pSelectableRow', pois não é uma propriedade conhecida de 'tr'.

A: você precisa configurar o primeiro tabulemodule no ngmodule

minha solução foi - basta remover o caractere '*' da expressão ^ __ ^

<div ngFor="let talk in talks">