Sefa Sefa - 2 months ago 157
AngularJS Question

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

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


my productSearch.module

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

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

})

export class ProductSearchModule{}


my productSearch component

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 file

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


As you can see, this is a very basic example of Angular. I just want to print name of each product.

Error i'm getting:


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


UPDATE:

Component constructor changed as

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

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


and template html changed as

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


But i still get error:


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


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

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


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

Update

You also need to add CommonModule as shown below,

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

import {CommonModule} from @angular/common;

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

})
Comments