1. ホーム
  2. アンギュラー

[解決済み】Angularの例外。ngForIn'は既知のネイティブプロパティではないため、バインドできない

2022-03-24 21:42:28

質問

何が間違っているのでしょうか?

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

解決方法は?

この問題で5分以上無駄にするのは少なくとも3回目なので、Q&Aを投稿することにしました。

私は次のように入力しました。 in ではなく of を ngFor 式で指定します。

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>

以降 ngForIn は、同じ名前の入力プロパティを持つ属性ディレクティブではありません (たとえば ngIf の(既知のネイティブ)プロパティであるかどうかを確認しようとします。 template 要素で、そうではないため、エラーになります。

アップデイト - 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>