Erreur : Can't bind to 'ngforOf' since it isn't a known property of 'tr'

[tbecco]

Bonjour

J'ai 3 niveaux de modules : app.module, backoffice.module et themequestion.module. Le dernier permet d'afficher une liste des différents Thèmes.

Ci dessous la structure des modules

app.module.ts

import { NgModule } from '@angular/core';

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

import { AppComponent } from './app.component';

import { HomeComponent } from './modules/general/home/home.component';

import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({

  declarations: [

    AppComponent,

    HomeComponent,

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

    NgxPaginationModule,

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

backoffice.module.ts

import { NgModule } from '@angular/core';

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

import { BackofficeComponent } from './backoffice.component';

import { BackofficeRoutingModule } from './backoffice-routing.module';

@NgModule({

  declarations: [

    BackofficeComponent,

  ],

  imports: [

    CommonModule,

    BackofficeRoutingModule,

  ],

  exports: [

    BackofficeComponent

  ],

  providers: [

  ],

})

export class BackofficeModule { }

Themequestion.module.ts

import { NgModule } from '@angular/core';

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

import { FormsModule } from '@angular/forms';

import { ReactiveFormsModule } from '@angular/forms';

import { Routes, RouterModule } from '@angular/router'

import { ThemequestionRoutingModule } from './themequestion-routing.module';

import { ThemequestionComponent } from './themequestion.component';

import { HttpClientModule } from '@angular/common/http';

import { ThemequestionService } from './themequestion.service';

import { DetailsComponent } from './details/details.component';

import { CreateComponent } from './create/create.component';

import { UpdateComponent } from './update/update.component';

const routes: Routes = [

  {

    path: '', component: ThemequestionComponent, children: [

      { path: '', component: ThemequestionComponent },

      { path: 'create', component: CreateComponent },

      { path: 'edit/:id', component: UpdateComponent }

    ]

  },

];

@NgModule({

  imports: [

    CommonModule,

    CommonModule, RouterModule.forChild(routes),

    ThemequestionRoutingModule,

    HttpClientModule,

    FormsModule,

    ReactiveFormsModule

  ],

  exports: [

    ThemequestionComponent

  ],

  declarations: [

    ThemequestionComponent,

    DetailsComponent, 

    CreateComponent, 

    UpdateComponent

  ],

  providers: [

    ThemequestionService

  ],

})

export class ThemequestionModule { }

themequestion.component.ts

import { Component, OnInit } from '@angular/core';

import { ThemequestionService } from './themequestion.service';

import { Themequestion } from './themequestion';

@Component({

  selector: 'themequestion',

  templateUrl: './themequestion.component.html',

  styleUrls: ['./themequestion.component.css']

})

export class ThemequestionComponent implements OnInit {

  themequestions: Themequestion[] = [];

  constructor(

    private themequestionService: ThemequestionService) {

  }

  ngOnInit() {

    this.themequestionService.getAll().subscribe((data: Themequestion[])=>{

      console.log(data);

      this.themequestions = data;

    })  

  }

}

themequestion.component.html (la partie qui ne fonctionne pas et qui donne l'erreur cité en objet )

.......        

<tbody>

            

            <tr *ngfor = "let themequestion of themequestions">

                <td>{{themequestion.Id}}</td>

                <td>{{themequestion.CodeTheme}}</td>

                <td>{{themequestion.NomTheme}}</td>

                <td>{{themequestion.DescriptionTheme}}</td>

                <td>

                    <button type="button" class="btn btn-info btn-sm m-1" routerLink="">Modifier</button>

                    <button type="button" class="btn btn-danger btn-sm m-1" routerLink="">Supprimer</button>

                </td>

            </tr>

        </tbody>

.......

Je dois préciser que je suis totalement débutant avec Angular en phase d'apprentissage. 

Angular : 10 (j'avais la même problématique avec angular 9)

Cela fais plusieurs jours, que je recherche sur les forums (le BrowserModule  dans le module racine et le CommonModule  dans le module enfant, mais rien n'y fait) Je commence à désespérer.

Par avance, je tiens à remercier tous ceux qui pourront m'aider àrésoudre ce sujet