reactivos - pasar parametros entre componentes angular 4
Excepción angular: no se puede vincular a ''ngForIn'' ya que no es una propiedad nativa conocida (8)
¿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">
TL; DR;
Use let ... of en lugar de let ... in !!
Si eres nuevo en Angular (> 2.x) y posiblemente estás migrando desde Angular1.x, lo más probable es que te confundas con.
Como andreas ha mencionado en los comentarios a continuación
for ... of
iteraciones sobre los
values
de
un objeto, mientras que
for ... in
itera sobre las
properties
de
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 con
dentro de la directiva
ngFor
para obtener los valores.
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í!
Escribí
in
lugar
of
en la expresión ngFor.
Antes de 2-beta.17 , debería ser:
<div *ngFor="#talk of talks">
A partir de beta.17, use la sintaxis
let
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
in
lugar, se convierte en
<template ngFor #talk [ngForIn]="talks">
<div>...</div>
</template>
Como
ngForIn
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 elemento de
template
, y no lo es, de ahí el error.
ACTUALIZACIÓN
: a partir de 2-beta.17, use la sintaxis
let
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
in
lugar, se convierte en
<template ngFor let-talk [ngForIn]="talks">
<div>...</div>
</template>
En lugar de en :
template: `<div *ngFor="let talk in talks">
uso de :
template: `<div *ngFor="let talk of talks">
Espero que esto resuelva el problema.
En mi caso, WebStrom autocompleta insertado en minúsculas
*ngfor
, incluso cuando parece que elige el camello correcto (
*ngFor
).
Intente importar la
import { CommonModule } from ''@angular/common'';
en angular final como
*ngFor
,
*ngIf
todos están presentes en
CommonModule
Mi problema fue que Visual Studio de alguna manera se
minúscula en minúsculas
*ngFor
a
*ngfor
al copiar y pegar.
P: No se puede vincular a ''pSelectableRow'' ya que no es una propiedad conocida de ''tr''.
R: debe configurar el primeng tabulemodule en ngmodule
mi solución fue: simplemente elimine el carácter ''*'' de la expresión ^ __ ^
<div ngFor="let talk in talks">