Can't bind to 'ngforOf' error for nested ngfor

Question

I get the following error

Error: Template parse errors: Can't bind to 'ngforOf' since it isn't a known property of 'ion-item'. 1. If 'ion-item' is an Angular component and it has 'ngforOf' input, then verify that it is part of this module. 2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (...

for the following template code

  <ion-card *ngFor="let i of routineLen">
      <ion-card-header>
        {{routines[i].routineName}}
      </ion-card-header>
      <ion-card-content>
        <ion-item class ="row" *ngfor="let j of setLen[0]">
            <ion-item class="col">
                <ion-label fixed>Set Name: {{routines[i].sets[j].setExercise}}</ion-label>
            </ion-item>
        </ion-item>
      </ion-card-content>
  </ion-card>

I'm pretty sure the error has to do with me nesting the ngfor, because separately the loops work, but can't find anything that may be wrong. Appreciate any help.

here's my app.module.ts file if that helps

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';

import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { RoutinePage } from '../pages/routine/routine';
import { AuthProvider } from '../providers/auth/auth';
import { RoutinesProvider } from '../providers/routines/routines';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage,
    RoutinePage
  ],
  imports: [
    BrowserModule,
    CommonModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage,
    RoutinePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthProvider,
    RoutinesProvider
  ]
})
export class AppModule {}

and here are my imports for home.ts

import { Component } from '@angular/core';
import { NavController, ModalController, LoadingController } from 'ionic-angular';
import { RoutinesProvider } from '../../providers/routines/routines';
import { AuthProvider } from '../../providers/auth/auth';
import { LoginPage } from '../login/login';
import { RoutinePage} from '../routine/routine';
import { RoutineModel } from '../../app/models/routine-model';
import { SubRoutine } from '../../app/models/routine-model';

Christian Christian · Accepted Answer · 2017-10-15T22:57:21

You need to import the CommonModule and add it to the imports array of the module which declares this component. You also seem to be implementing the *ngFor directive incorrectly, it doesn't work like a normal for loop in the sense that you iterate the array with the index, it's like a for each method in which each iteration the variable holds the actual element.

If you need the index then you can do something like this:

*ngFor="let item of items; let i = index"

Can't bind to 'ngforOf' error for nested ngfor

2 Answers