Angular 4:ngFor inside html not working

Question

This is in my product.component.html

<div class="col-md-6">
    <table class="table table-bordered table-responsive">
        <thead>
            <tr>
                <th class="text-center">Име</th>
                <th class="text-center">Фамилия</th>
                <th class="text-center">Град</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let i as months">
                <td>{{i}}</td>
            </tr>
        </tbody>
    </table>
</div>

This is in my product.component.ts

  import { Component } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})

export class ProductComponent {

  months = ["January", "Feburary", "March", "April", "May", 
        "June", "July", "August", "September",
        "October", "November", "December"];

}

This is in my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from'@angular/router';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { ItemComponent } from './item/item.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,
    ItemComponent
  ],
  imports: [
    BrowserModule,
      FormsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I is not print my months in html with ngFor, because error "Can't bind to 'ngForAs' since it isn't a known property of 'tr'. (""

Answer 1

Firstly, you are missing CommonModule in your imports. Add that in your AppModule:

import { CommonModule } from `@angular/common';

imports: [
  CommonModule, 
  BrowserModule,
  FormsModule,
],

Secondly, the *ngFor syntax is wrong. Correct it to following.

 <tr *ngFor="let i of months">