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">
380
Mark Rajcok 2 janv. 2016 à 02:39

8 réponses

Meilleure réponse

Puisque c'est au moins la troisième fois que je gaspille plus de 5 minutes sur ce problème, je me suis dit que je publierais le Q & A. J'espère que cela aidera quelqu'un d'autre sur la route ... probablement moi!

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

Avant la version 2-beta.17 , il devrait être:

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

Depuis la version bêta.17, utilisez la syntaxe let au lieu 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 transforme en

<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 alors de voir s'il s'agit d'une propriété (native connue) de template élément, et ce n'est pas le cas, d'où l'erreur.

MISE À JOUR - à partir de la 2-beta.17, utilisez la syntaxe let au lieu de #. Cela met à jour les éléments suivants:

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

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
737
Liam 22 mars 2019 à 10:55

TL; DR;

Utilisez let...of au lieu de let...in !!


Si vous débutez avec Angular (& gt; 2.x) et que vous migrez peut-être d'Angular1.x, vous confondez probablement in avec of. Comme andreas l'a mentionné dans les commentaires ci-dessous, for ... of itère sur values de un objet tout en for ... in itère sur properties dans un objet. Il s'agit d'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">

Vous devez donc remplacer in par of à l'intérieur de la directive ngFor pour obtenir les valeurs.

304
Liam 22 mars 2019 à 10:56

Essayez d'importer import { CommonModule } from '@angular/common'; en finale angulaire car *ngFor, *ngIf sont tous présents dans CommonModule

13
Liam 22 mars 2019 à 11:02

Dans mon cas, la saisie semi-automatique de WebStorm a inséré des minuscules {{0}}, même s'il semble que vous ayez choisi le bon camel casé (*ngFor).

11
Eran Shabi 19 avril 2016 à 19:12

Mon problème était que Visual Studio était en quelque sorte automatiquement en minuscules *ngFor en *ngfor lors du copier-coller.

6
Liam 22 mars 2019 à 11:02

Il existe une alternative si vous souhaitez utiliser of et ne pas passer à in. Vous pouvez utiliser KeyValuePipe introduit dans la version 6.1. Vous pouvez facilement parcourir un objet:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
7
सत्यमेव जयते 13 mai 2020 à 03:52

Q: Impossible de se lier à 'pSelectableRow' car ce n'est pas une propriété connue de 'tr'.

R: vous devez configurer le primeng tabulemodule dans ngmodule

-5
user9838309 24 mai 2018 à 04:11

Ma solution était - supprimez simplement le caractère '*' de l'expression ^ __ ^

<div ngFor="let talk in talks">
-19
Unkas 24 nov. 2016 à 19:01