Exception: impossible de se lier à 'ngFor' car il ne s'agit pas d'une propriété native connue

Qu'est-ce que je fais mal?

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, [])

L'erreur est

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

J'ai raté letdevant talk:

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

Notez que depuis la version beta.17, l' utilisation de #...pour déclarer des variables locales à l'intérieur de directives structurelles comme NgFor est obsolète. Utilisez letplutôt.

<div *ngFor="#talk of talks"> devient maintenant <div *ngFor="let talk of talks">

Réponse originale:

J'ai raté #devant talk:

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

Il est si facile d'oublier cela #. Je souhaite que le message d'erreur d'exception angulaire serait plutôt dire:
you forgot that # again.

Une autre faute de frappe menant à l'erreur de l'OP pourrait être d'utiliser in:

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

Vous devez utiliser à la ofplace:

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

Cette déclaration utilisée dans la version bêta d'Angular2 .....

Ci-après, utilisez let au lieu de #

let mot clé est utilisé pour déclarer la variable locale

Dans mon cas, c'était une petite lettre f. Je partage cette réponse juste parce que c'est le premier résultat sur Google

assurez-vous d'écrire *ngFor

Dans angular 7, cela a été corrigé en ajoutant ces lignes au .module.tsfichier:

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

Vous devez utiliser le mot clé let pour déclarer des variables locales, par exemple * ngFor = "let talk of talk"

Pour moi, pour faire court, j'ai été rétrogradé par inadvertance en angular-beta-16.

La syntaxe let ... est UNIQUEMENT valide dans 2.0.0-beta.17 +

Si vous essayez la syntaxe let sur quoi que ce soit en dessous de cette version. Vous générerez cette erreur.

Mettez à niveau vers angular-beta-17 ou utilisez la syntaxe #item dans les éléments.

Dans mon cas, j'ai fait l'erreur de copier à *ng-for=partir des documents.

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

Corrigez-moi si je me trompe. Mais il semble *ng-for=avoir été changé pour*ngFor=

J'ai oublié d'annoter mon composant avec " @Input " (Doh!)

book-list.component.html (code incriminé ):

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

Version corrigée de 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() {}

}

N'essayez pas non plus d'utiliser du TypeScript pur dans ce ... Je voulais plus correspondre à l' forutilisation et à l'utilisation *ngFor="const filter of filters"et j'ai obtenu le ngFor pas une erreur de propriété connue. Le simple remplacement de const par let fonctionne.

Comme l'a dit @ alexander-abakumov pour le ofremplacé par in.

Dans mon cas, le module contenant le composant utilisant le * ngFor résultant de cette erreur, n'était pas inclus dans app.module.ts. L'inclure dans le tableau des importations a résolu le problème pour moi.

Juste pour couvrir un cas de plus lorsque j'obtenais la même erreur et que la raison utilisait in au lieu de in iterator

Fausse route let file in files

Manière correcte let file of files

Utilisez ceci

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

Vous devez spécifier une variable pour itérer sur un tableau d'un objet