web-dev-qa-db-ja.com

例外： 'ngFor'は既知のネイティブプロパティではないためバインドできません

何がおかしいのですか？

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of 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 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">
angulartypescriptangular2-directives
213
Mark Rajcok

letの前にtalkがありませんでした。

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

beta.17以降 NgForのような構造化命令の中でローカル変数を宣言するための#...の使用は非推奨です。代わりにletを使用してください。
<div *ngFor="#talk of talks">は<div *ngFor="let talk of talks">になりました

元の答え：

talkの前に#がありませんでした。

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

#ということを忘れがちです。 Angular例外エラーメッセージではなく、次のようにしてください。
you forgot that # again。

503
Mark Rajcok

OPのエラーにつながる別のタイプミスはinを使うことです。

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

代わりにofを使用してください。

<div *ngFor="let talk of talks">
51
Alexander Abakumov

Angular 2 Betaバージョン.....で使用されるこのステートメント.

今後は ＃ の代わりに let を使用してください。

let キーワードはローカル変数を宣言するために使用されます

17
Naveen

私の場合、それは小文字のfでした。これがGoogleの最初の結果だからこそ、私はこの答えを共有しています

必ず書いてください *ngFor

8
Mohammad Kawsara

angular 7では、次の行を.module.tsファイルに追加することでこの問題を修正しました。

import { CommonModule } from '@angular/common'; imports: [CommonModule]

4
Alferd Nobel

私の場合は、ドキュメントから*ng-for=をコピーするのを間違えました。

https://angular.io/guide/user-input

間違っていれば訂正してください。しかし、*ng-for=は*ngFor=に変更されたようです

3
Kris Hollenbeck

私にとっては、長い話を短くするために、誤ってAngular-beta-16にダウングレードしていました。

let ...構文は2.0.0-beta.17でのみ有効です+

あなたがこのバージョンより下の何かでlet構文を試すなら。このエラーが発生します。

Angular-beta-17にアップグレードするか、items構文で#itemを使用してください。

3
Shaun

また、これで純粋なTypeScriptを使用しようとしないでください... forの使用にさらに対応し、*ngFor="const filter of filters"を使用し、ngFor not not known property errorを取得したいと思います。 constをletに置き換えるだけで動作します。

@ alexander-abakumovがofをinに置き換えたことについて述べたように。

1
shamox

私は自分のコンポーネントに " @Input "というアノテーションを付けるのを忘れていました（Doh！）

book-list.component.html （問題のあるコード）：

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

book-item.component.ts ：の修正バージョン

import { Component, OnInit, Input } from '@angular/core';

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}
0
paulsm4

私の場合、このエラーが発生する* ngForを使用するコンポーネントを含むモジュールは、app.module.tsに含まれていませんでした。 imports配列にそこを含めると、問題が解決しました。

0
Roy Touw