angularjs – 无法绑定到’ngForFor’,因为它不是’li’的已知属

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

import { AppComponent } from './app.component';
import { routing,appRoutingProviders} from './app.routing'
import { ProductSearchModule} from './productSearch/productSearch.module'

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    BrowserModule,FormsModule,HttpModule,routing,ProductSearchModule
  ],providers: [appRoutingProviders],bootstrap: [AppComponent]
})
export class AppModule { }

我的productSearch.module

import {NgModule} from '@angular/core'
import {ProductSearchComponent} from './productSearch.component'

@NgModule({
    exports: [ProductSearchComponent],declarations: [ProductSearchComponent],})

export class ProductSearchModule{}

我的productSearch组件

import { Component,Output } from '@angular/core'
import { Product} from '../shared/product'

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

export class ProductSearchComponent{
    /**
     *
     */
    constructor() {
        var p1 = new Product;
        p1.name = "alkan";

        var p2 = new Product;
        p2.name = "alper";
        this.Products = [p1,p2];

    }

    Products: Product[]

    search(){

    }
}

productSearch.component.html文件

<li *ngFor="let item for Products">{{item.name}}</li>

如您所见,这是Angular的一个非常基本的例子.我只想打印每个产品的名称.

我得到的错误：

Can’t bind to ‘ngForFor’ since it isn’t a known property of ‘li’.

更新：

组件构造函数更改为

var p1 = new Product();
p1.name = "alkan";

var p2 = new Product();
p2.name = "alper";
this.Products = [p1,p2];

和模板html改为

<li *ngFor="let item of Products">{{item.name}}</li>

但我仍然得到错误：

06006