Excepción angular: no se puede vincular a 'ngForIn' ya que no es una propiedad nativa conocida

356

¿Qué estoy haciendo 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, [])

El error es

EXCEPTION: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">
Mark Rajcok
fuente
3
intente cambiar esto <div * ngFor = "deje hablar en conversaciones"> a esto <div * ngFor = "deje hablar en conversaciones"> nota: "en" a "de"
Ishimwe Aubain Consolateur
Supongo que eres de C # / Java, cometí el mismo error de usar en lugar de Of
Abhay Dhar

Respuestas:

701

Como esta es al menos la tercera vez que malgasto más de 5 minutos en este problema, pensé que publicaría las preguntas y respuestas. Espero que ayude a alguien más en el camino ... ¡probablemente a mí!

He escrito inen lugar de ofen la expresión ngFor.

Antes de 2-beta.17 , debería ser:

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

A partir de beta.17, use la letsintaxis en lugar de #. Vea la ACTUALIZACIÓN más abajo para más información.


Tenga en cuenta que la sintaxis ngFor "se desugará" en lo siguiente:

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

Si usamos en su inlugar, se convierte en

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

Dado ngForInque no es una directiva de atributo con una propiedad de entrada del mismo nombre (como ngIf), Angular intenta ver si es una propiedad (nativa conocida) del templateelemento, y no lo es, de ahí el error.

ACTUALIZACIÓN : a partir de 2-beta.17, use la letsintaxis en lugar de #. Esto se actualiza a lo siguiente:

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

Tenga en cuenta que la sintaxis ngFor "se desugará" en lo siguiente:

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

Si usamos en su inlugar, se convierte en

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>
Mark Rajcok
fuente
77
Y sí, recuerde el #antes de la talkvariable (como dijo: "espero que ayude a alguien más en el futuro ... ¡probablemente a mí!")
Nobita
2
@Nobita, sí, ese me ha hecho tropezar con la misma frecuencia. También escribí un Q&A para ese: stackoverflow.com/questions/34012291/…
Mark Rajcok
2
tan apestoso cuando te das cuenta ... Me parece realmente contra-intuitivo, tan acostumbrado al estilo for-in. Votaría sus dos publicaciones de preguntas y respuestas más si pudiera, gracias
Pete
1
Gracias Mark ¿No es el mayor mensaje de error, como se supone que significa WTF "ngForIn"? Pero en retrospectiva, duh! Luché con esto durante unos 20 minutos antes de encontrar tus preguntas y respuestas.
Metodista
2
Estoy de acuerdo en que la respuesta debería tener ambas. Pero actualicé la respuesta para aclarar que después de la versión beta.17 la sintaxis es diferente. (Dejé de intercambiarlo, así que lo último es lo primero). En su lugar, solo puse una pequeña nota. A primera vista, un recién llegado puede no darse cuenta de la sintaxis más reciente. Es un cambio menor pero hace una gran diferencia
redfox05
288

TL; DR;

Use let ... of en lugar de let ... in !!


Si eres nuevo en angular (> 2.x) y, posiblemente, la migración de Angular1.x, más probable es que estás confundiendo incon of. Como Andreas ha mencionado en los comentarios a continuación for ... ofitera sobre values de un objeto mientras se for ... initera sobre properties en un objeto. Esta es una nueva característica introducida en ES2015.

Simplemente reemplace:

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

con

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

Por lo tanto, debe reemplazar incon laofngFor directiva interna para obtener los valores.

mamsoudi
fuente
2
Como comentario aparte, ¿alguien sabe la razón detrás del uso de "de", "en" parece una opción más natural aquí.
Morvael
2
@mamsoudi @Morvael La diferencia es que for..initera las claves / propiedades for...ofdel objeto mientras itera los valores del objeto. for(prop in foo) {}es el mismo que for(prop of Object.keys(foo)) {}. Esta es una nueva característica del lenguaje de ECMA Script 2015 / ES6. Entonces, esto es solo remotamente un problema angular.
Andreas Baumgart
esto es lo que sucede cuando has estado codificando en C # durante años y luego
pasas
de solución funciona correctamente, gracias
sin un
13

Intenta importar import { CommonModule } from '@angular/common';en la final angular que *ngFor, *ngIftodos están presentes enCommonModule

Rohitesh
fuente
Creo que esta respuesta sería la razón más común hoy en día para obtener el error en el título de OP.
G. Stoynev
11

En mi caso, WebStrom autocompletado insertado en minúsculas *ngfor, incluso cuando parece que eliges el camello correcto ( *ngFor).

Eran Shabi
fuente
6

Mi problema fue que Visual Studio de alguna manera se minúscula automáticamente *ngForal *ngforcopiar y pegar.

Tomino
fuente
1

Hay una alternativa si desea usar ofy no cambiar a in. Se puede usar KeyValuePipeintroducido en 6.1. Puede iterar fácilmente sobre un objeto:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>
सत्यमेव जयते
fuente
-4

P: No se puede vincular a 'pSelectableRow' ya que no es una propiedad conocida de 'tr'.

R: debe configurar el primeng tabulemodule en ngmodule

usuario9838309
fuente
-16

mi solución fue: simplemente elimine el carácter '*' de la expresión ^ __ ^

<div ngFor="let talk in talks">
Unkas
fuente