Really odd problem. I'm getting an error when I try to use *ngFor on a tr element:
<table>
<tbody>
<tr *ngFor="let item of productsData">
<!-- some Code -->
<tr>
</tbody>
</table>
In my component.ts file I have this:
productsData: ProductDataModel[] = [];
constructor(private productService: ProductService) { }
ngOnInit(): void {
this.SubscribeForData();
}
SubscribeForData() {
this.productService.GetAllProducts().subscribe(result => {
if (result.success) {
this.productsData = result.model;
}
});
}
This particular component is in a child module so has the CommonModule imported in the @NgModule from '@angular/common' and the app.module.ts has BrowserModule imported from '@angular/platform-browser'.
app.module.ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Module which component is declared in:
@NgModule({
declarations: [
AllProductsComponent
],
imports: [
CommonModule,
UserAccountsRoutingModule,
FormsModule,
ReactiveFormsModule,
]
})
I have used *ngFor else where without any issues.
The angular version I am running is 14.0.4
