No se puede enlazar a 'ngForOf' ya que no es una propiedad conocida de 'tr' (versión final)


129

Estoy usando la versión final de Angular2 (2.1.0). Cuando quiero mostrar una lista de empresas, aparece este error.

en file.component.ts:

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

en file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

9
asegúrese de que no haya cometido un error tipográfico también ngforda el error que mencionó. Debería serngFor
Piotr Kula

angular también distingue entre mayúsculas y minúsculas.
Iftikhar Ali Ansari

Respuestas:


241

Añadir BrowserModulea imports: []en @NgModule()si es el módulo de raíz ( AppModule), de lo contrario el CommonModule.

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

2
sí, tengo varios módulos. Olvidé esto. Funciona ahora :) gracias
Mourad Idrissi

4
Vale la pena mencionar que CommonModule está ubicado en '@ angular / common', por lo que debe asegurarse de agregar import {CommonModule} desde '@ angular / common'
knsheely

4
Tuve un problema similar. mi aplicación tiene varios módulos, la declaración del módulo del navegador de importación debe agregarse en el módulo de la aplicación y en otro módulo.
ssmsnet

1
Tenía varios módulos. Eso me salvó el día. ¡Gracias!
fabricioflores

1
a veces puede ser un simple error tipográfico, el mismo error ocurre cuando se hace "* ngFor =" dejar pasajero o pasajeros "<--- aviso:" o "debería ser" de ";-)
michabbb

44

En mi caso, el problema fue que mi compañero de equipo mencionó *ngforen plantillas en lugar de *ngFor. Es extraño que no haya un error correcto para manejar este problema (en Angular 4).


bueno, eso podría haberme
desconcertado

1
Similar: escribí *ngFor="let diagram if diagrams", observe el if. Un mensaje de "error de análisis" sería mejor ...
klenium

@klenium, ¡me salvaste el día! Recibí ese error al usar *ngFor="lang in languages"donde se espera angular 8 *ngFor="let lang of languages". Mensaje de error bastante engañoso imo: /
Jona Paulus

37

Debe importar 'CommonModule' en el módulo donde está utilizando estas directivas integradas como ngFor, ngIf, etc.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

3
dices importarlo en el componente, luego mostrar el código importándolo al módulo
Chris - Haddox Technologies

10

Cosas para recordar:

Cuando se utilizan módulos personalizados (módulos distintos de AppModule), es necesario importar el módulo común en él.

yourmodule.module.ts

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

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

¿Sabes por qué obtendría ese error / advertencia en realidad en Chrome incluso después de tener el módulo común en mi clase de módulo secundario / personalizado?
Ak777

7

Si está creando su propio módulo, agregue CommonModule en las importaciones en su propio módulo


Agregar CommonModule funcionó para mí. Mejore su respuesta. Comparte pasos también
Ashish Yadav

5

Esto también puede suceder si no declara un componente de ruta en su módulo de funciones. Así por ejemplo:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Observe que ViewComponent no está en la matriz de declaraciones, cuando debería estarlo.


Gracias hombre, este no fue mi problema, pero me dio una pista y ¡bingo, mi problema está resuelto!
Abhinav Saxena

1

Módulo personalizado Necesita módulo común

importar {CommonModule} desde "@ angular / common";

@NgModule ({importaciones: [CommonModule]})


1

Cuando usamos "app-routing.module" nos olvidamos de importar "CommonModule". ¡Recuerda importar!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

1

Tuve el mismo error pero tenía el CommonModule importado. En su lugar, dejé una coma donde no debería estar debido a copiar / pegar al dividir un módulo:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

1

app.module.ts corregido y cambiado a: importar el BrowserModule en el módulo de su aplicación

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

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

1

Recibía el mismo error, puede solucionarlo mediante uno de estos métodos:

  1. Si no tiene ningún módulo anidado

    a. Importa CommonModule en tu módulo de aplicación

    si. Importe su componente donde está agregando * ngFor en el módulo de la aplicación , defina en declaraciones

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

C. Si está utilizando el archivo de módulo separado para el enrutamiento, entonces importe el CommonModule en su módulo de enrutamiento o, de lo contrario, importe el CommonModule en el módulo de su aplicación

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})
  1. Si tiene un módulo anidado, realice el primer paso en ese módulo en particular

En mi caso, el segundo método resolvió mi problema.
Espero que esto te ayudará


1

Para mí, el problema fue que no importé el módulo personalizado HouseModuleen mi app.module.ts. Tenía las otras importaciones.

Archivo: app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

1

Lectores futuros

Marque cada uno de los siguientes:

  • El componente se declara en un módulo angular ÚNICO
  • Asegúrate de tener import { CommonModule } from '@angular/common';
  • Reinicie el IDE / editor

0

Comencé con el proyecto en vivo base de Angular8 que obtuve el problema anterior, pero cuando usamos "app-routing.module" nos olvidamos de importar "CommonModule". ¡Recuerda importar!

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

@NgModule({
  imports: [
    CommonModule
]})

Resolverá tu error.


0

Este problema aparece cuando usamos Rutas, podemos mostrar el contenido estático de cualquier módulo, pero cuando intentamos usar una funcionalidad como * ngIg no funciona, por trabajo como por ejemplo @Ruben Szeker, es necesario agregar Component en app.module.ts en las importaciones [], para finalizar, cerrar o matar la ejecución actual del servidor y volver a intentar ejecutar el servicio, se resolverá el problema. Si esto no funciona para usted, puede intentarlo de otra manera.

Lo siento por mi mal ingles.


0

Tuve un problema debido a ** en su lugar *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Sí, VS Code parece poner automáticamente dos estrellas en lugar de una sola.
Alexei

0

He encontrado un error similar (*ngIf ) incluso si todas mis importaciones estaban bien y el componente se procesó sin ningún otro error + el enrutamiento estaba bien.

En mi caso AppModuleno incluía ese módulo específico. Lo extraño es que no se quejó de esto, pero esto podría estar relacionado con cómo trabaja Ivy ng serve(tipo de módulos de carga según enrutamiento, pero no se consideran sus dependencias).


0

Perdí ~ 1h en este error, en una sola página específica. Probé todas las respuestas aquí, pero finalmente la solución fue reconstruir todo con ng, el problema simplemente desapareció ...


0

Así que por favor asegúrate

  1. Sin error de sintaxis en las directivas

  2. El navegador (en el módulo de la aplicación) y los módulos comunes (en otro / niño) se importan (lo mismo que Günter Zöchbauer mencionó anteriormente)

  3. Si tiene rutas en la aplicación, el módulo de ruta debe importarse en el Módulo de la aplicación

  4. Todos los módulos del componente enrutado también se importan en el módulo de la aplicación, por ejemplo: app-routing.module.ts es el siguiente:

    rutas const: Rutas = [

    {ruta: '', componente: CustomerComponent},

    {ruta: 'admin', componente: AdminComponent}

    ];

Luego, el módulo de la aplicación debe importar módulos de CustomerComponent y AdminComponent en @NgModule ().


-1

Incluso me enfrenté al mismo problema, probé todas las respuestas aquí, pero un cambio simple me ayudó a resolver este problema, en lugar de incluir * ngFor en la tretiqueta, lo incluí en la tbodyetiqueta. Espero que ayude a alguien.

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>

-2

importar CommonModule tanto en el módulo secundario como en el componente

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.