web-dev-qa-db-fra.com

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

J'utilise Angular2 Final release (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>
angularangular2-template
65
Mourad Idrissi

Ajoutez BrowserModule à imports: [] dans @NgModule() s'il s'agit du module racine (AppModule), sinon, CommonModule.

import {BrowserModule, CommonModule} from '@angular/common';
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})
132
Günter Zöchbauer

Dans mon cas, le problème était que mon coéquipier a mentionné *ngfor dans 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).

18
Mr_Green

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

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }
15
Codiee

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

5
Alok Kamboj

Choses à retenir:

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

yourmodule.module.ts

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

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

J'ai eu la même erreur mais j'avais le CommonModule importé. Au lieu de cela, j'ai laissé une virgule où cela 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
scsx

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

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

Module commun: module commun nécessaire

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

@NgModule ({ Importations: [ CommonModule ] }.)

0
Vinayak Shedgeri

Quand on utilise "app-routing.module", on oublie d'importer "CommonModule" N'oubliez pas d'importer!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})
0
Juan Carlos WebMaster Ajahuana