CODEWITHSUNDEEP
angularionic-frameworkngfor
krissan
krissan

Reputation: 5

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

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';

Upvotes: 0

Views: 5426

Answers (2)

Hamid Araghi
Hamid Araghi

Reputation: 454

Use *ngFor instead of *ngfor
This will solve your problem. Happy.

Upvotes: 0

Christian
Christian

Reputation: 2831

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"

Upvotes: 1

Related Questions