web-dev-qa-db-fra.com

Exception: impossible de se lier à 'ngFor' car ce n'est pas 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">
angulartypescriptangular2-directives
190
Mark Rajcok

J'ai raté let devant talk:

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

Notez que à partir de la version bêta.17 utilisation de #... pour déclarer des variables locales dans des directives structurelles telles que NgFor est obsolète. Utilisez let à la place de .
<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 ce #. Je souhaite que le message d'erreur exception angulaire dise plutôt:
you forgot that # again.

474
Mark Rajcok

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

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

au lieu de of:

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

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

Par la suite, utilisez let au lieu de #

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

16
Naveen

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

assurez-vous d'écrire *ngFor

8
Mohammad Kawsara

Dans angular 7, ceci a été corrigé en ajoutant ces lignes au fichier .module.ts:

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

4
Alferd Nobel

Pour ma part, 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 de let sur quelque chose en dessous de cette version. Vous allez générer cette erreur.

Mettez à niveau angular-beta-17 ou utilisez la syntaxe #item in items.

3
Shaun

Dans mon cas, j'ai commis l'erreur de copier *ng-for= à partir de la documentation.

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

Corrigez-moi si je me trompe. Mais il semble que *ng-for= ait été remplacé par *ngFor=

2
Kris Hollenbeck

N'essayez pas non plus d'utiliser purement TypeScript dans ceci ... Je voulais correspondre davantage à for usage et utiliser *ngFor="const filter of filters" et j'ai obtenu le ngFor, pas une erreur de propriété connue. Il suffit de remplacer const par let.

Comme @ alexander-abakumov a dit pour le of remplacé par in.

1
shamox

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

book-list.component.html (code fautif):

<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() {}

}
0
paulsm4

Dans mon cas, le module contenant le composant à l'aide de * ngFor, entraînant cette erreur, n'était pas inclus dans app.module.ts. L'inclure là-bas dans le tableau imports a résolu le problème pour moi.

0
Roy Touw