webentwicklung-frage-antwort-db.com.de

Kann nicht an 'ngForOf' gebunden werden, da es keine bekannte Eigenschaft von 'tr' ist (endgültige Version)

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>
angularangular2-template
65
Mourad Idrissi

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 */],
  ..
})
132
Günter Zöchbauer

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).

18
Mr_Green

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

Wenn Sie ein eigenes Modul erstellen, fügen Sie CommonModule in Importen in Ihrem eigenen Modul hinzu

5
Alok Kamboj

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: []
})
3
Rut Shah

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

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]
})
0
Sanjay kumar

Custom Modul benötigt ein gemeinsames Modul

import {CommonModule} von "@ angle/common";

@NgModule ({ Importe: [ CommonModule ] })

0
Vinayak Shedgeri

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]})
0
Juan Carlos WebMaster Ajahuana