Can't ngFor array of objects in *.component.html

Hi, I fetched below data from API and can’t ngFor product object, It gives NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-row' Error.

API Data:

{
    "id": "5175",
    "price": "4.50",
    "date": "2022-04-01 17:25",
    "product": [
        {
            "id": "95c8-73",
            "name": "Product Name",
            "edinica_id": "eb27549a073c",
            "izmerenija": {
                "id": "95-a03c",
                "naimenovanie": "pc"
            },
            "edinicy_izmerenij": [
                {
                    "id": "95d-e23c",
                    "name": "pc"
                }
            ]
        }
    ]
}

My *.component.html file.

 <ion-row *ngFor="let item of data.product">
          <ion-col>
            <p>ID:</p>
            <p>Name:</p>
          </ion-col>
          <ion-col>
            <span>
              {{item.id}}
            </span>
            <span>
               {{item.name}}
            </span>
          </ion-col>
</ion-row>

Thanks in advance.

Please show the module definition for the component

It is likely missing the commonmodule which adds this angular directive to the compiler

I have imported CommonModule, BrowserModule in my app.module.ts.

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

...
...

@NgModule({
    imports: [
        BrowserModule,
        CommonModule

My component doesn’t have the module file below is the screenshot.

image

Which module imports this component?

Plse show that code

And this issue happened to me with modals too because I forgot to make the modal part of a module

This is my dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { DashboardPageRoutingModule } from './dashboard-routing.module';
import { DashboardPage } from './dashboard.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DashboardPageRoutingModule
  ],
  declarations: [DashboardPage]
})
export class DashboardPageModule {}

This is the function where I call that modal and pass the ID to the modal.

import { ItemlistComponent } from '../Modal/itemlist/itemlist.component';
...
...

 async _OpenModal(sid) {
    const modal = await this.modalController.create({
      component: ItemlistComponent,
      breakpoints: [0.5, 0.9],
      initialBreakpoint: 0.5,
      componentProps: {
        mid: sid,
      },
      cssClass: 'ModalCss',
    });
    return await modal.present();
  }

In your dashboard module on the declarations array add the declaration of the item list component

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DashboardPageRoutingModule
  ],
  declarations: [DashboardPage, ItemlistComponent]
})
export class DashboardPageModule {}

But, if you are creating a lot of modals i sugest your generate a custom module:

ionic g module path/to/modal/folder

And, in that module you import the necessary modules and export the components

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ItemlistComponent } from './itemlist/itemlist.component';
import { AddsaleComponent } from './addsale/addsale.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  declarations: [ItemlistComponent, AddsaleComponent],
  exports: [ItemlistComponent, AddsaleComponent]
})
export class ModalModule {}

So wherever you want to use one of the modals you can do this:

import { ModalModule }  from 'relative/path/to/modal/module';

@NgModule({
  imports: [
     ...
     ModalModule
  ],
  declarations: [SomePage]
})
export class SomePageModule {}
2 Likes

Thanks for the help I added ItemlistComponent in declarations and it worked fine.

Why did I need to add ItemlistComponent in declarations? Please.

Every component (a page is also a component) must be part of a module in order to be bundled into the final bundle.

That’s an angular way of working

(How I explain myself)

2 Likes

@Tommertom Thanks for the info :slight_smile: