Ich verwende Angular2 Final Release (2.1.0). Wenn ich eine Liste mit Unternehmen anzeigen möchte, ist dieser Fehler aufgetreten.
in file.component.ts
:
public companies: any[] = [
{ "id": 0, "name": "Available" },
{ "id": 1, "name": "Ready" },
{ "id": 2, "name": "Started" }
];
in file.component.html
:
<tbody>
<tr *ngFor="let item of companies; let i =index">
<td>{{i}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
Fügen Sie BrowserModule
zu imports: []
in @NgModule()
hinzu, wenn es sich um das Stammmodul (AppModule
) handelt, andernfalls um CommonModule
.
import {BrowserModule, CommonModule} from '@angular/common';
..
..
@NgModule({
imports: [BrowserModule, /* or CommonModule */],
..
})
In meinem Fall war das Problem, dass mein Teamkollege *ngfor
in Vorlagen anstelle von *ngFor
erwähnte. Seltsamerweise gibt es keinen korrekten Fehler, um dieses Problem zu beheben (In Angular 4).
Sie müssen 'CommonModule' in die Komponente importieren, in der Sie diese integrierten Anweisungen wie ngFor, ngIf usw. verwenden.
import { CommonModule } from "@angular/common";
@NgModule({
imports: [
CommonModule
]
})
export class ProductModule { }
Wenn Sie ein eigenes Modul erstellen, fügen Sie CommonModule in Importen in Ihrem eigenen Modul hinzu
Dinge zu beachten:
Wenn benutzerdefinierte Module verwendet werden (andere Module als AppModule), muss das allgemeine Modul darin importiert werden.
yourmodule.module.ts
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
exports:[ ],
declarations: []
})
Ich hatte den gleichen Fehler aber ich hatte das CommonModule importiert. Stattdessen habe ich beim Teilen eines Moduls ein Komma hinterlassen, das nicht durch Kopieren/Einfügen ersetzt werden sollte:
@NgModule({
declarations: [
ShopComponent,
ShoppingEditComponent
],
imports: [
CommonModule,
FormsModule,
RouterModule.forChild([
{ path: 'shop', component: ShopComponent }, <--- offensive comma
])
]
})
app.module.ts behoben und geändert in: importiere das BrowserModule in dein App Modul
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]
})
Custom Modul benötigt ein gemeinsames Modul
import {CommonModule} von "@ angle/common";
@NgModule ({ Importe: [ CommonModule ] })
Bei Verwendung von "app-routing.module" vergessen wir den Import von "CommonModule". Denken Sie daran, zu importieren!
import { CommonModule } from "@angular/common";
@NgModule({ imports: [ CommonModule]})