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 von Unternehmen anzeigen möchte, wurde dieser Fehler angezeigt.

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>

In BrowserModulezu imports: []in , @NgModule()wenn es der Root - Modul ( AppModule), da sonst die CommonModule.

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

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

In meinem Fall war das Problem, dass mein Teamkollege *ngforin Vorlagen statt erwähnte *ngFor. Seltsam, dass es keinen korrekten Fehler gibt, um dieses Problem zu beheben (In Angular 4).

Sie müssen 'CommonModule' in das Modul importieren, in dem Sie diese integrierten Anweisungen wie ngFor, ngIf usw. verwenden.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Dinge, an die man sich erinnern sollte:

Wenn benutzerdefinierte Module verwendet werden (andere Module als AppModule), muss das gemeinsame Modul darin importiert werden.

yourmodule.module.ts

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

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

Wenn Sie ein eigenes Modul erstellen, fügen Sie CommonModule beim Import in Ihr eigenes Modul hinzu

Dies kann auch passieren, wenn Sie in Ihrem Funktionsmodul keine Routenkomponente deklarieren. Also zum Beispiel:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Beachten Sie, dass sich die ViewComponent nicht im Deklarationsarray befindet, wohingegen dies der Fall sein sollte.

Benutzerdefiniertes Modul Benötigt ein gemeinsames Modul

{CommonModule} aus "@ angle / common" importieren;

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

Ich hatte den gleichen Fehler, aber ich hatte das CommonModule importiert. Stattdessen habe ich ein Komma hinterlassen, das beim Kopieren / Einfügen beim Aufteilen eines Moduls nicht angezeigt 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: Importieren Sie das BrowserModule in Ihr App-Modul

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

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

Ich habe den gleichen Fehler erhalten. Sie können dies durch eine der folgenden Methoden beheben:

1. Wenn Sie kein verschachteltes Modul haben

   ein. Importieren Sie das CommonModule in Ihr App-Modul

   b. Importieren Sie Ihre Komponente, in die Sie das * ngFor im App-Modul hinzufügen , und definieren Sie es in Deklarationen

// 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. Wenn Sie die separate Moduldatei für das Routing verwenden, importieren Sie das CommonModule in Ihr Routing-Modul. Andernfalls importieren Sie das CommonModule in Ihr App-Modul

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

2. Wenn Sie ein verschachteltes Modul haben, führen Sie den ersten Schritt in diesem bestimmten Modul aus

In meinem Fall hat die 2. Methode mein Problem gelöst.
Hoffe das wird dir helfen

Für mich war das Problem, dass ich das maßgeschneiderte Modul nicht HouseModulein mein importiert habe app.module.ts. Ich hatte die anderen Importe.

Datei: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Zukünftige Leser

Überprüfen Sie Folgendes:

• Die Komponente wird in einem SINGLE- Winkelmodul deklariert
• Stell sicher dass du hast import { CommonModule } from '@angular/common';
• Starten Sie die IDE / den Editor neu

Ich bin mit Angular8 Base Live-Projekt gestartet habe das obige Problem bekommen, aber wenn Sie "app-routing.module" verwenden, vergessen wir den Import von "CommonModule". Denken Sie daran zu importieren!

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

@NgModule({
  imports: [
    CommonModule
]})

Es wird Ihren Fehler lösen.

Dieses Problem tritt auf, wenn Routen verwendet werden. Wir können statischen Inhalt jedes Moduls anzeigen. Wenn Sie jedoch versuchen, eine Funktion wie * ngIg zu verwenden, funktioniert dies nicht. Wenn Sie beispielsweise @Ruben Szeker benötigen, müssen Sie Komponenten in app.module.ts hinzufügen Bei Importen [] wird das Problem gelöst, wenn der Abschluss beendet oder die tatsächliche Ausführung beendet wird. Wenn dies bei Ihnen nicht funktioniert, versuchen Sie es auf eine andere Weise.

Es tut mir leid für mein schlechtes Englisch.

Ich hatte ein Problem wegen ** statt *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Ich habe einen ähnlichen Fehler festgestellt (*ngIf ) auch wenn alle meine Importe in Ordnung waren und die Komponente ohne anderen Fehler gerendert wurde + Routing war in Ordnung.

In meinem Fall AppModulewar dieses spezielle Modul nicht enthalten. Das Seltsame ist, dass es sich nicht darüber beschwert hat, aber dies könnte damit zusammenhängen, wie Ivy arbeitet ng serve(Art der Lademodule entsprechend dem Routing, aber seine Abhängigkeiten werden nicht berücksichtigt).

Ich habe gerade ~ 1 Stunde bei diesem Fehler auf nur einer bestimmten Seite verloren. Versuchte alle Antworten hier, aber schließlich bestand die Lösung darin, das Ganze mit ng wieder aufzubauen, das Problem verschwand einfach ...

Also bitte stellen Sie sicher

1. Kein Syntaxfehler in Direktiven

2. Browser (im App-Modul) und Common (im anderen / untergeordneten) Modul werden importiert (wie oben von Günter Zöchbauer erwähnt)

3. Wenn Sie Routen in der Anwendung haben, sollte das Routenmodul in das App-Modul importiert werden

4. Alle Module der gerouteten Komponente werden auch in das App-Modul importiert, z. B.: App-routing.module.ts lautet wie folgt:

   const routen: Routen = [

   {Pfad: '', Komponente: CustomerComponent},

   {Pfad: 'admin', Komponente: AdminComponent}

   ];

Dann muss das App-Modul Module von CustomerComponent und AdminComponent in @NgModule () importieren.

Selbst wenn ich mit dem gleichen Problem konfrontiert war, habe ich alle Antworten hier ausprobiert, aber eine einfache Änderung hat mir geholfen, dieses Problem zu beheben, anstatt * ngFor in das trTag aufzunehmen, habe ich es in das tbodyTag aufgenommen. Hoffe es hilft jemandem.

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

Importieren Sie CommonModule sowohl in das untergeordnete Modul als auch in die Komponente