Pregunta No se puede enlazar a 'ng-forOf' ya que no es una propiedad nativa conocida


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

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

Puedo obtener la aplicación angular para cargar y mostrar 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 trato de agregar una matriz de cadenas y trato de 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?


73
2017-12-11 17:15


origen


Respuestas:


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

Nombres de elemento como <router-outlet> Sin embargo, no se modificaron para seguir siendo compatibles con las especificaciones de los elementos personalizados, lo que requiere un guion 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 navegador

@NgModule({
  imports: [BrowserModule],

los BrowserModule exportaciones CommonModule como también WorkerAppModule hace.

Actualizar

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


127
2017-12-11 18:11



Con Angular 2.1.0+

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

Con Angular 2 rc5:

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

BrowserModule registra proveedores de servicios críticos 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 estos módulos.

ejemplo:

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


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

32
2017-08-16 13:48



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


11
2018-01-25 08:30



ngIf y ngFor están declarados en CommonModule de @ angular / común.

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

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

actualiza tu código como sigue

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

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

para más información Módulo angular


8
2018-02-13 13:07



La sintaxis de la directiva ngFor es

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

Darse cuenta de ya no es #nombre de nombres como era pero dejar el nombre de los nombres y el ngFor requiere el * y distingue entre mayúsculas y minúsculas.


4
2017-08-20 22:21



Detrás de las otras respuestas, otra posible causa es que utilizas algún formateador html-repacker que convierte todo tu HTML, incluidas las plantillas de componentes, en minúsculas.

La sustitución de plantilla angular es sensible a mayúsculas y minúsculas para el ngFor y ngIf etiquetas, al menos hoy, pero no puedo decir nada para la próxima semana.

En particular, los complementos de webpack, por ejemplo htmljs o html-minify funcionan mal ya que convierten todo a minúsculas en su configuración predeterminada. Verifique dos veces el código HTML en el texto compilado, puede ser con todas las minúsculas (como *ngif=...), que no será aceptado, incluso si en su fuente original es correcto!

Por supuesto, rompe el estándar HTML5.

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


4
2018-03-04 15:22



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

Solo para cualquiera que no lo tenga, también tuve un problema donde escribí ngif en lugar de ngIf (fíjate en el capitolio 'I').


0
2018-04-12 23:10