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]})