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

128

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>
Mourad Idrissi
quelle
9
Stellen Sie sicher, dass Sie keinen Tippfehler gemacht haben. Dies führt zu ngfordem von Ihnen erwähnten Fehler. Sollte seinngFor
Piotr Kula
Winkel ist auch Groß- und Kleinschreibung zu beachten.
Iftikhar Ali Ansari

Antworten:

238

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 */],
  ..
})
Günter Zöchbauer
quelle
2
Ja, ich habe mehrere Module. Ich habe das vergessen. Es funktioniert jetzt :) danke u
Mourad Idrissi
4
Es könnte erwähnenswert sein, dass sich das CommonModule in '@ angle / common' befindet. Sie müssen also sicherstellen, dass Sie den Import {CommonModule} von '@
angle
4
Ich hatte ein ähnliches Problem. Meine App hat mehrere Module. Die Anweisung zum Importieren des Browser-Moduls muss im App-Modul und in einem anderen Modul hinzugefügt werden.
ssmsnet
1
Ich hatte mehrere Module. Das hat mir den Tag gerettet. Vielen Dank!
Fabricioflores
1
manchmal kann es ein einfacher Tippfehler sein, der gleiche Fehler tritt auf, wenn "* ngFor =" Passagier oder Passagiere lassen "<--- note:" oder "sollte" von "sein ;-)
michabbb
44

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

Herr Green
quelle
Nun
1
Ähnlich: Ich schrieb *ngFor="let diagram if diagrams", beachte die if. Eine "Analysefehler" Nachricht wäre besser ...
Klenium
@klenium, du hast meinen Tag gerettet! Ich habe diesen Fehler bei der Verwendung, *ngFor="lang in languages"wo Winkel 8 erwartet *ngFor="let lang of languages". Ziemlich irreführende Fehlermeldung imo: /
Jona Paulus
36

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 { }
Codiee
quelle
3
Sie sagen, importieren Sie es in die Komponente, und zeigen Sie dann den Code, der es in das Modul importiert
Chris - Haddox Technologies
10

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: []
})
Rut Shah
quelle
Wissen Sie, warum ich diesen Fehler / diese Warnung tatsächlich in Chrome erhalten würde, selbst wenn ich das commonModule für meine untergeordnete / benutzerdefinierte Modulklasse habe?
Ak777
7

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

Alok Kamboj
quelle
Das Hinzufügen von CommonModule hat bei mir funktioniert. Bitte verbessern Sie Ihre Antwort. Teilen Sie auch Schritte
Ashish Yadav
5

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.

Max Mumford
quelle
Danke Mann, das war nicht mein Problem, aber es gab mir einen Hinweis und Bingo, mein Problem ist gelöst !!
Abhinav Saxena
1

Benutzerdefiniertes Modul Benötigt ein gemeinsames Modul

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

@NgModule ({Importe: [CommonModule]})

Vinayak Shedgeri
quelle
1

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

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

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]
})
Sanjay Kumar
quelle
1

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

Akshay Sharma
quelle
1

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
  ]
})
Ruben Szekér
quelle
1

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
Ben Winding
quelle
0

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.

Nagnath Mungade
quelle
0

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.

Developsonora tecnologa e Inno
quelle
0

Ich hatte ein Problem wegen ** statt *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"
Sunleo
quelle
Ja, VS Code scheint automatisch zwei Sterne anstelle eines einzigen zu setzen.
Alexei
0

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

Alexei
quelle
0

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

Elektordi
quelle
0

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.

Abhinav Saxena
quelle
-1

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>
Surendra Mourya
quelle
-2

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

Daner
quelle