web-dev-qa-db-fra.com

Angular exception: impossible de se lier à 'ngForIn' 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="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, [])

L'erreur est

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
angularangular2-directives
301
Mark Rajcok

Etant donné que c’est au moins la troisième fois que je perds plus de 5 minutes sur ce problème, j’imagine que je posterais les questions et réponses. J’espère que cela aidera une autre personne sur la route ... probablement moi!

J'ai tapé in au lieu de of dans l'expression ngFor.

Befor 2-beta.17, il devrait être:

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

À partir de la version bêta 17, utilisez la syntaxe let à la place de #. Voir la mise à jour plus bas pour plus d'informations.

Notez que la syntaxe ngFor "desugars" est la suivante:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

Si nous utilisons in à la place, cela se traduit par

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

Puisque ngForIn n'est pas une directive d'attribut avec une propriété d'entrée du même nom (comme ngIf), Angular essaie de voir s'il s'agit d'une propriété (connue de natif) de l'élément template, et ce n'est pas le cas, d'où l'erreur.

UPDATE - à partir du 2-beta.17, utilisez la syntaxe let au lieu de #. Ceci met à jour à ce qui suit:

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

Notez que la syntaxe ngFor "desugars" est la suivante:

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

Si nous utilisons in à la place, cela se traduit par

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
591
Mark Rajcok

TL; DR;

Utilisez ( let ... de au lieu de let ... dans !!

Si vous êtes nouveau sur Angular (> 2.x) et que vous êtes en train de migrer de Angular1.x, vous risquez de confondre in avec of. Comme andreas l'a mentionné dans les commentaires ci-dessous, for ... of itère sur valuesof un objet tandis que for ... in itère sur propertiesin = un objet. Ceci est une nouvelle fonctionnalité introduite dans ES2015.

Remplacez simplement:

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

avec

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

Donc, vous devez remplacez in par of dans la directive ngFor pour obtenir les valeurs.

217
mamsoudi

Au lieu de in:

  template: `<div *ngFor="let talk in talks">

utiliser de:

  template: `<div *ngFor="let talk of talks">

J'espère que cela résoudra le problème.

17
Alexander Zaldostanov

Dans mon cas, WebStrom auto-complète insérée en minuscule *ngfor, même s’il semble que vous choisissez le bon camel casé (*ngFor).

11
Eran Shabi

Essayez d'importer import { CommonModule } from '@angular/common'; dans angular final comme *ngFor, *ngIf tous présents dans CommonModule

8
Rohitesh

Mon problème était, que Visual Studio en quelque sorte automatiquement minuscule*ngFor à *ngfor sur copier et coller.

6
Tomino