web-dev-qa-db-ja.com

Angular 例外： '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">
angularangular2-directives
279
Mark Rajcok

この問題で私が5分以上無駄にしたのは少なくとも3回目なので、Q＆Aを投稿したいと思いました。

NgFor式でinの代わりにofを入力しました。

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

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

beta.17以降、#の代わりにlet構文を使用してください。更なる情報は更なる下のUPDATEを見てください。

NgForの構文は次のようになります。

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

代わりにinを使うと、

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

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

_ update _ - 2-beta.17以降、#の代わりにlet構文を使用してください。これにより、以下が更新されます。

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

NgForの構文は次のようになります。

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

代わりにinを使うと、

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

TL; DR;

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

Angular（> 2.x）が初めてで、場合によってはAngular1.xから移行する場合は、inとofを混同している可能性があります。 andreasが以下のコメントで述べたように、for ... ofはvaluesofobject）を反復処理し、for ... inはpropertiesinobject）を反復処理します。これは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に置き換える必要があります。

193
mamsoudi

in の代わりに：

  template: `<div *ngFor="let talk in talks">

/ を使用します。

  template: `<div *ngFor="let talk of talks">

これで問題が解決することを願っています。

11
Alexander Zaldostanov

私の場合は、WebStormのオートコンプリートで小文字の*ngforが挿入されます。たとえ正しいラクダのケース（*ngFor）を選択したように見えてもです。

10
Eran Shabi

import { CommonModule } from '@angular/common';、*ngForがすべてCommonModuleに含まれているので、*ngIfを角度付きでインポートしてみてください

6
Rohitesh

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

5
Tomino