nie może wiązać się z 'ngForFor', ponieważ nie jest znana własność 'li'

Question

Moja app.module

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 { } 

mój productSearch.module

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

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

}) 

export class ProductSearchModule{} 

mój komponent Wyszukaj produkt

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(){ 

    } 
} 

plik productSearch.component.html

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

Jak widać, jest to bardzo prosty przykład kątowego. Chcę tylko wydrukować nazwę każdego produktu.

Błąd Dostaję:

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

UPDATE:

konstruktor Komponent zmieniła się

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

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

i szablon html zmienił się

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

ale nadal dostać błąd:

Can't bind to 'ngForOf' since it isn't a known property of 'li' 

Answer 1

var p1 = new Product(); //<----added(); 
    p1.name = "alkan"; 

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

    //<---replace for keyword by of keyword 
    <li *ngFor="let item of Products">{{item.name}}</li> 

Trzeba także dodać CommonModule jak pokazano poniżej,

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

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

@NgModule({ 
    imports: [CommonModule],     //<====added 
    exports: [ProductSearchComponent], 
    declarations: [ProductSearchComponent], 

}) 

Answer 2

myślę, że to: let item of Products nie for w pliku productSearch.component.html. Sprawdź aktualizację documentation

Answer 3

*ngFor jest dyrektywa, która znajduje się w kątowe na CommonModule (od @angular/common pakiet). Więc upewnij się, aby zaimportować ten moduł w swoim własnym modułem tak:

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

@NgModule({ 
    imports: [CommonModule, ...], 
    exports: [...], 
    declarations: [...], 
}); 

Co chciałbym zrobić, to stworzyć wspólny moduł, który importuje wszystkie podstawowe moduły, jak CommonModule itp i ich ponownego eksportu . Kiedy importujesz moduł wspólny, masz już dostępne wszystkie podstawowe dyrektywy.