tablas reactivos pasar parametros formularios formulario entre dinamicas comunicacion componentes angular angular2-directives

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">