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

formularios en angular 5

Question

Estoy usando la versión final de Angular2 (2.1.0). Cuando quiero mostrar una lista de empresas, recibo 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>

Answer 1

Agregue BrowserModule a las imports: [] en @NgModule() si es el módulo raíz ( AppModule ), de lo contrario, CommonModule .

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

Answer 2

Cosas para recordar:

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

yourmodule.module.ts

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

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

Answer 3

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

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

Answer 4

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 { }

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

import { BrowserModule } from ''@angular/platform-browser''; import { BrowserAnimationsModule } from ''@angular/platform-browser/animations''; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ], exports: [BrowserModule, BrowserAnimationsModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] })

Answer 9

Módulo personalizado Necesita módulo común

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

@NgModule ({importaciones: [CommonModule]})