不能綁定到 'ngForFor'，因爲它不是 '禮'

我app.module不能綁定到 'ngForFor'，因爲它不是 '禮'

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

我的產品搜索組件

的已知屬性

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'.

UPDATE：

組件構造改變

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>

但我仍然得到錯誤：

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

來源

2016-09-19 Sefa

應該是'var p1 = new Product（）; ＆var p2 = new Product（）;' – micronyks

您能否在構造函數的上面聲明'Products：Product []'這個？ – micronyks

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>

更新

您還需要添加CommonModule如下圖所示爲，

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

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

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

})

來源

2016-09-19 16:32:56 micronyks

中的更新進行更改。請參閱問題 – Sefa

中的更新檢查更新的答案。 – micronyks

CommonModule做到了。謝謝。 – Sefa

我認爲它是：let item of Products不for在productSearch.component.html文件。檢查documentation

來源

2016-09-19 16:32:56

進行了更改。請參閱問題 – Sefa

*ngFor是駐留在角的CommonModule一個指令（從@angular/common包）。所以一定要導入這個模塊你自己的模塊中是這樣的：

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

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

我喜歡做的事，是創建一個共享的模塊，其中進口所有的基本模塊，像CommonModule等，並重新導出它們。所以當你導入共享模塊時，你已經擁有了所有的基本指令。

來源

2017-01-05 13:43:57 Hinrich

不能綁定到 'ngForFor'，因爲它不是 '禮'

回答

相關問題