角度の例外：既知のネイティブプロパティではないため、「ngForIn」にバインドできません

何が悪いのですか？

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

エラーは

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

これは少なくとも3回目なので、この問題で5分以上無駄に費やしたので、Q＆Aを投稿したいと思っていました。それが他の誰かの助けになるといいのですが…多分私です！

ngFor式のin代わりに入力しofました。

2-beta.17より前では、次のようになります。

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

beta.17以降では、のlet代わりに構文を使用してください#。詳細については、さらに下のUPDATEを参照してください。

ngFor構文は次のように「desugars」であることに注意してください。

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

in代わりに使用すると、

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

ngForInisは同じ名前の入力プロパティ（などngIf）を持つ属性ディレクティブではないため、Angularはそれが（既知のネイティブ）プロパティであるかどうかを確認しようとします。template要素の、そうでない場合はエラーになります。

UPDATE -2-beta.17以降では、のlet代わりに構文を使用します#。これは次のように更新されます。

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

ngFor構文は次のように「desugars」であることに注意してください。

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

in代わりに使用すると、

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

TL; DR;

let ... inの代わりにlet ... ofを使用してください !!

Angular（> 2.x）が初めてで、Angular1.xから移行する可能性がある場合は、と混同inしている可能性がありますof。アンドレアスは、以下のコメントで述べたようにfor ... of反復処理values の一方オブジェクトfor ... in反復上properties でオブジェクト。これはES2015で導入された新機能です。

単に置き換える：

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

と

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

だから、あなたがしなければならない置き換えるinとof内部のngFor値を取得するディレクティブ。

import { CommonModule } from '@angular/common';として角度ファイナルでインポートしてみてください*ngFor、*ngIfすべてがに存在しますCommonModule

私の場合、WebStromオートコンプリートは小文字を挿入しまし*ngforた。これは、キャメルケースを選択したように見えた場合でも（*ngFor）です。

私の問題は、Visual Studio がコピー＆ペースト時にどういうわけか自動的に小文字になっ *ngForてい*ngforたことでした。

にof切り替えずに使用したい場合は、別の方法がありますin。KeyValuePipe6.1で導入されたものを使用できます。オブジェクトを簡単に反復できます。

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

Q：「pSelectableRow」は「tr」の既知のプロパティではないため、バインドできません。

A：ngmoduleでPrimeng tabulemoduleを設定する必要があります

私の解決策は-式から「*」文字を削除するだけです^ __ ^

<div ngFor="let talk in talks">