例外：既知のネイティブプロパティではないため、「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">

私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。

OPのエラーの原因となる別のタイプミスは、次のようなものinです。

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

of代わりに使用する必要があります：

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

このステートメントはAngular2ベータ版で使用されます。

今後は＃ではなくletを使用してください

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

私の場合、それは小さな手紙fでした。これはグーグルでの最初の結果なので、私はこの答えを共有しています

必ず書いてください *ngFor

angular 7では、これらの行を.module.tsファイルに追加することでこれを修正しました：

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

ローカル変数を宣言するには、letキーワードを使用する必要があります。例：* ngFor = "let talk of talks"

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

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

このバージョンより前のバージョンでlet構文を試した場合。このエラーが発生します。

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

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

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

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

コンポーネントに「@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() {}

}

また、これで純粋なTypeScriptを使用しないでください。for使用法と使用法にもっと対応したいと思って*ngFor="const filter of filters"いて、既知のプロパティエラーではないngForを取得しました。constをletに置き換えるだけで機能します。

@ alexander-abakumovがにof置き換えられたと述べたようにin。

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

同じエラーが発生したもう1つのケースをカバーするために、その理由はイテレータではなくinを使用していた

進入禁止 let file in files

正しい方法 let file of files

これを使って

<div *ngFor="let talk of talks> 
   {{talk.title}} 
   {{talk.speaker}}
   <p>{{talk.description}} 
</div>

オブジェクトの配列を反復処理するには、変数を指定する必要があります