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

Sometimes it can happen when you use

*ngFor="let data in dataList">{{data}}

Try changing it to

*ngFor="let data of dataList">{{data}}

You need to replace 'in' by 'of'.

Answer 2

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.

Answer 3

Sometimes it could happen when you forgot the let in the for like:

<span *ngFor="teacher of teachers">{{teacher}}</span>

And it should be:

<span *ngFor="let teacher of teachers">{{teacher}}</span>

Answer 4

I figured out the problem, I had webpack minimizing my templates. Once I turned minimizing off then it works fine.

{
    test: /\.html$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                minimize: false
            }
        }
    ]
}