☰

Angular 例外: 'ngForIn' は既知のネイティブ プロパティではないため、バインドできません 質問する

tag-icon • tag-icon angular angular2-directives
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">

ベストアンサー1

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>

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

更新- 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>

おすすめ記事