angular - template - No se puede vincular a ''ng-forOf'' ya que no es una propiedad nativa conocida

can''t bind to ''ngforof'' since it isn''t a known property of

Question

Estoy tratando de seguir el tutorial básico de Angular 2 aquí:

https://angular.io/docs/js/latest/guide/displaying-data.html

Puedo hacer que la aplicación angular se cargue y muestre mi nombre con este código:

import { Component, View, bootstrap } from ''angular2/angular2'';

@Component({
    selector: "my-app"
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";

    }

}
bootstrap(AppComponent);

Sin embargo, cuando intento agregar una serie de cadenas e intento mostrarlas con un ng-for, arroja el siguiente error:

Can''t bind to ''ng-forOf'' since it isn''t a known native property ("
    <p>Friends:</p>
    <ul>
        <li [ERROR ->]*ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:16
Property binding ng-forOf not used by any directive on an embedded template ("
    <p>Friends:</p>
    <ul>
        [ERROR ->]<li *ng-for="#name of names">
        {{ name }}
        </li>
"): AppComponent@4:12

Aquí está el código:

import { Component, View, bootstrap } from ''angular2/angular2'';

@Component({
    selector: "my-app"
})

@View({
    template: `
        <p>My name: {{ myName }}</p>
        <p>Friends:</p>
        <ul>
            <li *ng-for="#name of names">
                {{ name }}
            </li>
        </ul>
    `,
    directives: [ NgFor ]
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";
        this.names = ["Tom", "Dick", "Harry"];
    }

}
bootstrap(AppComponent);

¿Qué me estoy perdiendo?

Answer 1

Dado que ha tenido tanto éxito en el otro tema marcado como un duplicado de este , aquí hay una respuesta mía que ha recibido muchos votos a favor:

Solo para cualquiera que se lo pierda, también tuve un problema donde escribí ngif en lugar de ngIf (observe el capitol ''I'').

Answer 2

Detrás de las otras respuestas, otra posible causa es que use algún formateador-reparador html que convierta todo su HTML, incluidas las plantillas de componentes, en minúsculas.

La sustitución de plantilla angular ngFor entre ngFor y minúsculas para las etiquetas ngFor y ngIf , al menos hoy, pero no puedo decir nada seguro para la próxima semana.

En particular, los complementos de paquete web, por ejemplo htmljs o html-minify funcionan mal, ya que convierten todo a minúsculas en su configuración predeterminada. Vuelva a verificar el código HTML en el texto compilado, puede estar en minúsculas (como *ngif= ...), lo cual no será aceptado, incluso si en su fuente original es correcto.

Por supuesto, rompe el estándar HTML5.

Ocurre porque nuestro desarrollo angular2 más maravilloso piensa que "desean seguir html5 más de cerca" , pero siempre hay algunas excepciones sorprendentes, lo que hace que el trabajo con angular2 sea siempre mejor y mejor.

Answer 3

En Angular2 beta ng-for no es correcto. debería ser *ngFor .

Answer 4

La sintaxis de la directiva ngFor es

<tr *ngFor="let name of names">{{name}}</tr>

Tenga en cuenta que ya no es #name of names como era, pero deje que name of names y ngFor requieran * y distingan entre mayúsculas y minúsculas.

Answer 5

Mi problema fue causado por una exportación faltante del componente que contiene * ngFor. Este componente (MyComponentWithNgFor) ya fue importado y declarado dentro de mi SharedModule. SharedModule también importó CommonModule de Angular, por lo que todo se veía bien.

Sin embargo, estaba usando mi componente con * ngFor en otro módulo, llamémoslo Módulo B, que estaba importando SharedModule, para poder usar MyComponentWithNgFor.

Mi solución fue simplemente agregar mi componente que contiene * ngFor a la matriz de exportaciones de mi SharedModule, de esta manera:

@NgModule({
  imports: [ CommonModule ],
  declarations: [ MyComponentWithNgFor ],
  exports: [ MyComponentWithNgFor ]
})
export class SharedModule { }

Esto hizo posible que mi ModuleB (que importa SharedModule) use MyComponentWithNgFor.

Answer 6

Si usa alpha 52, consulte CHANGELOG.md en el repositorio de GitHub. Cambiaron la plantilla a mayúsculas y minúsculas, que es ngFor lugar de ng-for (similar para todas las demás directivas)

Sin embargo, los nombres de elementos como <router-outlet> no se cambiaron para seguir siendo compatibles con la especificación de elementos personalizados que requiere un guión en el nombre de la etiqueta de los elementos personalizados.

En > = RC.5 (y final) ngFor y directivas similares no son ambientales por defecto. Deben proporcionarse explícitamente como

@NgModule({
  imports: [CommonModule],

o si no le importa que el módulo esté bloqueado para ser solo del navegador

@NgModule({
  imports: [BrowserModule],

BrowserModule exporta CommonModule como también WorkerAppModule hace WorkerAppModule .

Actualizar

BrowserModule debe importarse en el módulo de la aplicación, en otros módulos CommonModule debe importarse en su lugar.

Answer 7

También puede ser causado por un error tipográfico. Acabo de enfrentar este problema que tenía

<div class="row" *ngFor="let order or orders">

Como puede ver, hay un pedido o pedidos de alquiler en lugar de un pedido de pedidos

Answer 8

Tenga cuidado con el error tipográfico: es

* ngFor

• no ng-for
• no para
• no ng-For

Answer 9

ngIf y ngFor se declaran en CommonModule desde @ angular / common .

CommonModule contribuye con muchas de las directivas comunes que necesitan las aplicaciones, incluidas ngIf y ngFor.

BrowserModule importa CommonModule y lo reexporta. El efecto neto es que un importador de BrowserModule obtiene directivas CommonModule automáticamente.

actualice su código de la siguiente manera

import { CommonModule } from ''@angular/common'';

@NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>

para más información NgModules

Answer 10

Con Angular 2.1.0+

Parece que esto es lo mismo, excepto que debe importar BrowserModule en el módulo de su aplicación e importar CommonModule en otros (no puede importar BrowserModule dos veces con rutas de carga lenta).

Con Angular 2 rc5:

Esta versión introdujo NgModules , debe importar BrowserModule en su (s) módulo (s) para usar ngFor y ngIf :

BrowserModule registra proveedores críticos de servicios de aplicaciones. También incluye directivas comunes como NgIf y NgFor que se vuelven inmediatamente visibles y utilizables en cualquiera de las plantillas de componentes de este módulo.

ejemplo:

import { NgModule }      from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }