Angular11 - NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'tr'

Question

the template TR not displayed, and generates an error : NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'tr'. I don't understand why. I am in Angular 11 and navigator Chrone

Error in the console html :

    <div>
    <h1 class="module-title">Job logs</h1>
    <span class="sp-notice">the time zone is set on GMT</span>
    <div class="container">
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#JobFirst</th>
                <th scope="col">Last start</th>
                <th scope="col">Last Finish</th>
                <th scope="col">Time</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of jobs">
                <th>{{ item.JobName }}</th>
                <td>{{ item.LastStartOperation }}</td>
                <td>{{ item.LastFinishOperation }}</td>
                <td>{{ item.Time }}</td>
              </tr>
            </tbody>
          </table>
    </div>
</div>

this is the content of the file component.ts :

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

@Component({
  selector: 'app-joblog',
  templateUrl: './joblog.component.html',
  styleUrls: ['./joblog.component.css']
})
export class JoblogComponent implements OnInit {

  jobs = [
    {
      JobName:'Client_Timer',
      LastFinishOperation:'2021-12-01',
      LastStartOperation:'2021-12-01',
      Time:'0 years 0 mons 0 days 0 hours 0 mins 0.00 secs'
    },    
    {
      JobName:'Truc_Astuce',
      LastFinishOperation:'2021-12-01',
      LastStartOperation:'2021-12-01',
      Time:'0 years 0 mons 0 days 0 hours 0 mins 0.00 secs'
    }
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

This is the contentof the App.module.tsfile :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import{ HttpClientModule } from "@angular/common/http";
import { RouterModule, Routes } from '@angular/router';
import { JoblogComponent } from './joblog/joblog.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthComponent } from './auth/auth.component';
import { from } from 'rxjs';

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
const appRoutes: Routes = [
  {path:'dashboard', component: DashboardComponent},
  {path:'auth', component: AuthComponent},
  {path:'joblogs', component: JoblogComponent},
  {path: '', component: DashboardComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    AuthComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule, 
    HttpClientModule,
    RouterModule.forRoot(appRoutes)    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Breeks

Where are you declaring your JoblogComponent ? I don't see it in the declarations array – Emaciation

I don't see the CommonModule imported in AppModule. As I remember *ngFor is a part of the CommonModule. – Quoits

Many thanks @Emaciation With the declaration, it is better ! (I am a beginner in angular) – Breeks

Ah cool, I'll add it as an answer then :-) – Emaciation

Answer 1

You should add the component to the declarations array:

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    AuthComponent,
    JoblogComponent
  ],

Emaciation