Can't bind to 'ngForOf' since it isn't a known property of 'tr' in Angular 9

问题

I'm having a problem that ngFor isn't working in my app.

I splited my app into separate modules and included import { CommonModule } from '@angular/common'; into my child module and import { BrowserModule } from '@angular/platform-browser'; into my app.modules.ts file, but I still get the error following error.

Can't bind to 'ngForOf' since it isn't a known property of 'tr'.

I have tried looking into other questions but all those said to just include CommonModule, which I am.

These are my files:

crud-list.component.html

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Id</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let item of cruds'>
      <td>{{item.OrderNumber}}</td>
    </tr>
  </tbody>
</table>

crud-list.component.ts

import { Component, OnInit } from '@angular/core';
import { CrudRequestService } from '@modules/crud/crud-services/crud-request.service';

@Component({
  selector: 'app-crud-list',
  templateUrl: './crud-list.component.html',
  styleUrls: ['./crud-list.component.scss']
})
export class CrudListComponent {
  public cruds: Array<any>;

  constructor(private objService: CrudRequestService) {
    this.objService.get().subscribe(
      (oDataResult: any) => { this.cruds = oDataResult.value; },
      error => console.error(error)
    );
  }
}

crud.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { CrudListComponent } from '@modules/crud/crud-list/crud-list.component';
import { CrudFormComponent } from '@modules/crud/crud-form/crud-form.component';
import { CrudComponent } from '@modules/crud/crud.component';

const routes: Routes = [
  {
    path: '', component: CrudComponent, children: [
      { path: '', component: CrudListComponent },
      { path: 'create', component: CrudFormComponent },
      { path: 'edit/:id', component: CrudFormComponent }
    ]
  },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [CrudComponent]
})

export class CrudModule { }

app.module.ts

/* all the imports */

@NgModule({
  declarations: [
    AppComponent,
    ForbidenAccessComponent,
    PageNotFoundComponent,
    AppHeaderComponent,
    AppFooterComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule,
    AppRoutingModule,
    CoreModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true,
    },
    BreadcrumbsService,
    AccordionService,
    ModalService,
    RequestService,
    IdentityProviderService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

/* imports */

const routes: Routes = [
  { path: 'home', canActivate: [AuthGuard], component: HomeComponent },
  { path: 'crud', canActivate: [AuthGuard], loadChildren: () => import('@modules/crud/crud.module').then(m => m.CrudModule)},
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // The error status pages
  { path: '403', component: ForbidenAccessComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

回答1:

When I recreate your problem in a stackblitz I don't have an issue.

https://stackblitz.com/edit/angular-60533597

Make sure that you add your components to the module declarations as well as to the Routes.

回答2:

crud.module.ts

//crud module should export crud component
@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [CrudComponent],
  exports: [CrudComponent]
})

export class CrudModule { }

you may also be missing adding CommonModule in your AppModule's imports array.

hopefully, this solves your problem!

回答3:

What is NgbModule in the import of you app.module ? Because i kwow @NgModule but this don't need to be in imports:[...] but only imported at the top.

And some suggestions: In crud-list.component.ts you need to unsubscribe your subscription and constructor is use for injection only, use ngOnInit ;)

export class CrudListComponent implements OnInit, OnDestroy {
 cruds: Array<any>
 dataSubscription: Subscription

 constructor(private objService: CrudRequestService) { }
 ngOnInit() {
  this.dataSubscription = 
  this.objService.get().subscribe(data => {
   this.cruds = data.value
  })
 }
  ngOnDestroy() {
    this.dataSubscription.unsubscribe()
  }
}

回答4:

Found the problem. While the app was running with no other issues than the one stated, when I went to replicate the problem on StackBlitz, the code there gave me an error, telling me that I needed to add the CrudListComponent on my @NgModule declaration, so all I had to do was to add the component there, rebuild the app and it worked.

crud.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { CrudListComponent } from '@modules/crud/crud-list/crud-list.component';
import { CrudFormComponent } from '@modules/crud/crud-form/crud-form.component';
import { CrudComponent } from '@modules/crud/crud.component';

const routes: Routes = [
  {
    path: '', component: CrudComponent, children: [
      { path: '', component: CrudListComponent },
      { path: 'create', component: CrudFormComponent },
      { path: 'edit/:id', component: CrudFormComponent }
    ]
  },
];

@NgModule({
  declarations: [CrudComponent, CrudListComponent, CrudFormComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})

export class CrudModule { }

来源：https://stackoverflow.com/questions/60533597/cant-bind-to-ngforof-since-it-isnt-a-known-property-of-tr-in-angular-9