Angular 11 error : Can't bind to 'ngForOf' since it isn't a known property of 'tr'

Question

I have the same page which works fine but I don't know why this one is not working. It looks like the error happens before the array gets filled. Why? On my other page, it is the same service and it works. Thanks for your help.

HTML

<thead>
  <tr>
    <th>#</th>
    <th>UserID</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let printShopPortalUser of printShopPortalUsers; let i = index">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ printShopPortalUser.userID }}</td>
  
  </tr>
</tbody>

Angular

@NgModule({
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      NgbModule
        
    ],
    declarations: [
    ]
})

printShopPortalUsers: UserPrintShop[] = [];

ngOnInit() {
//The first method is returning an empty array ! while it works on another page
    //this.printShopPortalUserService.findAll().pipe(first()).subscribe(printShopPortalUsers => this.printShopPortalUsers = printShopPortalUsers);

//This second method returns an array but the tr error happens before
    this.printShopPortalUserService.findAll().pipe(first()).subscribe((res:UserPrintShop[])=>{
      this.printShopPortalUsers = res;
      console.log(res);
    })
    console.log(this.printShopPortalUsers);


}

Answer 1

Finally I have found out where the issue was. I am using an angular template which is called "Paper Dashboard"

It has a file called "admin-layout.module.ts"

This is the module which imports the common module.

I just had to do the import of my component here and declare it here as well this and it worked

import { PrintShopPortalUserComponent } from '../../pages/printShopPortalUsers/printShopPortalUserComponent'; 

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    NgbModule
  ],
  declarations: [
   ..
    PrintShopPortalUserComponent,
  ..
  ]
})

Answer 2

in html add a truthy verfication to printShopPortalUsers

<tbody *ngIf="printShopPortalUsers">
          <tr *ngFor="let printShopPortalUser of printShopPortalUsers; let i = index">
               <th scope="row">{{ i + 1 }}</th>
               <td>{{ printShopPortalUser.userID }}</td>
          </tr>
</tbody>

Answer 3

you need to import CommonModule

@NgModule({
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      NgbModule,
      CommonModule  
    ],
    declarations: [
    ]
}