ngFor is not working

Question

I am using Angular 4.3.3 with the JIT compiler and get the error below when I run my application:

Property binding ngforOf not used by any directive on an embedded template. 
Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

I have made sure to import the BrowserModule in my main app module and I've imported the CommonModule in my child module that this error is originating from.

Here is the template that throws the error:

<div class="background"></div>
<div class="content normal-page">
    <ons-fab position="top right" ripple>+</ons-fab>
    <ons-list>
        <ons-list-item *ngFor="let item of items; let i = index">
            <div class="center">
                #{{i}} msg: {{item.msg}}
            </div>
        </ons-list-item>
    </ons-list>
</div>

Since I am importing the proper modules into the right places what could be causing this error?

Answer 1

The NgModule that contains your component needs to have CommonModule in imports

@NgModule({
  ...,
  imports: [CommonModule],
})
export class MySharedModule {}

Also binding ngforOf not used indicates that you are using *ngfor instead of *ngFor with capital F.