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

Question

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

en file.component.ts :

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

en file.component.html :

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

Answer 1

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

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

Answer 2

Dans mon cas, le problème était que mon coéquipier avait 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).

Answer 3

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

Answer 4

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

Answer 5

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