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


129

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>

9
assurez-vous que vous n'avez pas fait une faute de frappe trop ngfordonne l'erreur que vous avez mentionnée. Devrait êtrengFor
Piotr Kula

angular est également sensible à la casse.
Iftikhar Ali Ansari le

Réponses:


241

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

2
oui j'ai plusieurs modules. J'ai oublié ça. Ça marche maintenant :) merci
Mourad Idrissi

4
Il pourrait être intéressant de mentionner que le CommonModule est situé dans '@ angular / common', vous devez donc vous assurer d'ajouter l'importation {CommonModule} de '@ angular / common'
knsheely

4
J'ai eu un problème similaire. mon application a plusieurs modules, l'instruction du module de navigateur d'importation doit être ajoutée dans le module d'application et dans un autre module.
ssmsnet

1
J'avais plusieurs modules. Cela a sauvé ma journée. Merci!
fabricioflores

1
parfois il peut s'agir d'une simple faute de frappe, la même erreur se produit lorsque vous faites "* ngFor =" laissez le passager ou les passagers "<--- notice:" ou "should be" of ";-)
michabbb

44

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


bien qui aurait pu me jeter pour une boucle;)
tony09uk

1
Similaire: j'ai écrit *ngFor="let diagram if diagrams", remarquez le if. Un message "parse error" serait mieux ...
klenium

@klenium, tu as sauvé ma journée! J'ai eu cette erreur lors de l'utilisation *ngFor="lang in languages"où angular 8 attend *ngFor="let lang of languages". Message d'erreur assez trompeur imo: /
Jona Paulus

37

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

3
vous dites l'importer dans le composant, puis montrez le code en l'important dans le module
Chris - Haddox Technologies

10

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

Savez-vous pourquoi j'obtiendrais cette erreur / avertissement dans Chrome même après avoir le commonModule sur ma classe de module enfant / personnalisé?
Ak777

7

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


L'ajout de CommonModule a fonctionné pour moi Veuillez améliorer votre réponse. Partagez vos pas aussi
Ashish Yadav

5

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.


Merci mec, ce n'était pas mon problème mais cela m'a donné un indice et un bingo, mon problème est résolu !!
Abhinav Saxena le

1

Module personnalisé nécessite un module commun

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

@NgModule ({importations: [CommonModule]})


1

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

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

1

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

1

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

1

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


1

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

1

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

0

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.


0

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.


0

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

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Oui, VS Code semble mettre automatiquement deux étoiles au lieu d'une seule.
Alexei

0

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


0

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


0

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


-1

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>

-2

importer CommonModule dans le module enfant et le composant

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.