Exception angulaire: impossible de se lier à 'ngForIn' 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="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">

Comme c'est au moins la troisième fois que je perds plus de 5 minutes sur ce problème, je me suis dit que je publierais les questions et réponses. J'espère que cela aidera quelqu'un d'autre sur la route ... probablement moi!

J'ai tapé inau lieu de ofdans l'expression ngFor.

Avant 2-beta.17 , ce devrait être:

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

Depuis la version beta.17, utilisez la letsyntaxe au lieu de #. Voir la MISE À JOUR plus bas pour plus d'informations.

Notez que la syntaxe ngFor "desugars" dans ce qui suit:

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

Si nous utilisons à la inplace, cela se transforme en

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

Puisqu'il ngForInne s'agit pas d'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 l' templateélément, et ce n'est pas le cas, d'où l'erreur.

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

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

Notez que la syntaxe ngFor "desugars" dans ce qui suit:

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

Si nous utilisons à la inplace, cela se transforme en

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

TL; DR;

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

Si vous êtes nouveau angulaire (> 2.x) et éventuellement la migration de Angular1.x, le plus probable que vous confondez inavec of. Comme andreas a mentionné dans les commentaires ci - dessous for ... ofitère sur values d' un objet tout en for ... initè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">

Donc, vous devez remplacer inpar laofngFor directive inside pour obtenir les valeurs.

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

Dans mon cas, la saisie automatique WebStrom insérée en minuscules *ngfor, même s'il semble que vous choisissiez le bon boîtier camel ( *ngFor).

Mon problème était que Visual Studio en quelque sorte automatiquement converti en minuscules *ngFor à *ngforle copier-coller.

Il existe une alternative si vous souhaitez utiliser ofet ne pas passer à in. Vous pouvez utiliser KeyValuePipeintroduit dans 6.1. Vous pouvez facilement parcourir un objet:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

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

A: vous devez configurer le module tabulem primeng dans ngmodule

ma solution était - il suffit de supprimer le caractère '*' de l'expression ^ __ ^

<div ngFor="let talk in talks">