Impossible de se lier à 'ngForOf' car ce n'est pas une propriété connue de 'tr' (version finale)

J'utilise la version finale d'Angular2 (2.1.0). Lorsque je veux afficher une liste d'entreprises, j'ai cette erreur.

dans file.component.ts:

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

dans file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Ajouter BrowserModuleà imports: []en @NgModule()si c'est le module racine ( AppModule), sinon CommonModule.

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

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

Dans mon cas, le problème était que mon coéquipier était mentionné *ngfordans les modèles au lieu de *ngFor. Étrange qu'il n'y ait pas d'erreur correcte pour gérer ce problème (dans Angular 4).

Vous devez importer 'CommonModule' dans le module où vous utilisez ces directives intégrées comme ngFor, ngIf etc.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Choses à retenir:

Lorsque des modules personnalisés sont utilisés (modules autres que AppModule), il est nécessaire d'y importer le module commun.

yourmodule.module.ts

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

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

Si vous créez votre propre module, ajoutez CommonModule dans les importations dans votre propre module

Cela peut également se produire si vous ne déclarez pas de composant d'itinéraire dans votre module d'entités. Donc par exemple:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Notez que ViewComponent n'est pas dans le tableau des déclarations, alors qu'il devrait l'être.

Module personnalisé nécessite un module commun

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

@NgModule ({importations: [CommonModule]})

Lorsque vous utilisez "app-routing.module", nous oublions d'importer "CommonModule". N'oubliez pas d'importer!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

J'ai eu la même erreur mais j'ai importé le CommonModule. Au lieu de cela, j'ai laissé une virgule là où elle ne devrait pas être à cause du copier / coller lors du fractionnement d'un module:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

app.module.ts corrigé et modifié en: importez le BrowserModule dans votre module d'application

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

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

J'obtenais la même erreur, vous pouvez corriger via l'une de ces méthodes:

1. Si vous n'avez aucun module imbriqué

   une. Importez le CommonModule dans votre module d'application

   b. Importez votre composant là où vous ajoutez le * ngFor dans le module d'application , définissez-le dans les déclarations

// 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. Si vous utilisez le fichier de module séparé pour le routage, importez le CommonModule dans votre module de routage sinon Importez le CommonModule dans votre module d'application

// 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. Si vous avez un module imbriqué, effectuez la 1ère étape dans ce module particulier

Dans mon cas, la 2ème méthode a résolu mon problème.
J'espère que ceci vous aidera

Pour moi, le problème était que je n'avais pas importé le module personnalisé HouseModuledans mon app.module.ts. J'avais les autres importations.

Fichier: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Futurs lecteurs

Vérifiez chacun des éléments suivants:

• Le composant est déclaré dans un module angulaire UNIQUE
• Assurez-vous que vous avez import { CommonModule } from '@angular/common';
• Redémarrez l'IDE / l'éditeur

Je suis commencé sur le projet en direct de base Angular8, j'ai le problème ci-dessus, mais lorsque vous utilisez "app-routing.module", nous oublions d'importer "CommonModule". N'oubliez pas d'importer!

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

@NgModule({
  imports: [
    CommonModule
]})

Cela résoudra votre erreur.

Ce problème apparaît lorsque vous utilisez Routes, nous pouvons afficher le contenu statique de n'importe quel module, mais lorsque vous essayez d'utiliser une fonctionnalité telle que * ngIg ne fonctionne pas, pour un travail comme @Ruben Szeker, il faudrait ajouter un composant dans app.module.ts sur les importations [], pour terminer, fermer ou tuer le serveur d'exécution de l'actualité et réessayer d'exécuter le service, résoudra le problème. si cela ne fonctionne pas pour vous, je vais essayer un autre moyen.

Je suis désolé pour mon mauvais anglais.

J'ai eu un problème à cause de ** à la place *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

J'ai rencontré une erreur similaire ( *ngIf) même si toutes mes importations étaient OK et le composant a été rendu sans aucune autre erreur + le routage était OK.

Dans mon cas, AppModulen'incluait pas ce module spécifique. La chose étrange est qu'il ne s'est pas plaint de cela, mais cela pourrait être lié à la façon dont Ivy fonctionne ng serve(sorte de modules de charge en fonction du routage, mais ses dépendances ne sont pas prises en compte).

Juste perdu ~ 1h sur cette erreur, sur une seule page spécifique. J'ai essayé toutes les réponses ici, mais finalement la solution était de reconstruire le tout avec ng, le problème a juste disparu ...

Alors s'il vous plaît assurez-vous

1. Aucune erreur de syntaxe dans les directives

2. Le navigateur (dans le module d'application) et les modules communs (dans d'autres / enfants) sont importés (comme Günter Zöchbauer mentionné ci-dessus)

3. Si vous avez des routes dans l'application, le module de route doit être importé dans le module d'application

4. Tous les modules du composant routé sont également importés dans App Module, par exemple: app-routing.module.ts est comme suit:

   routes const: Routes = [

   {chemin: '', composant: CustomerComponent},

   {chemin: 'admin', composant: AdminComponent}

   ];

Ensuite, le module App doit importer les modules de CustomerComponent et AdminComponent dans @NgModule ().

Même si j'ai rencontré le même problème, j'ai essayé toutes les réponses ici, mais un simple changement m'a aidé à résoudre ce problème, au lieu d'inclure * ngFor dans la trbalise, je l'ai incluse dans la tbodybalise. J'espère que ça aide quelqu'un.

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

importer CommonModule dans le module enfant et le composant