2016-10-14 13 views
4

app.module.tsに動作していない* ngForは角2

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent }   from './app.component'; 
import { routing } from './app.routing'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { LoginComponent }  from './auth/login.component'; 
import { SignupComponent }  from './register/signup.component'; 

import { HomeComponent } from './home/home.component'; 
import { SpinnerComponent} from './uiComponents/page-spinner/Spinner-Component'; 
import { SpinnerService} from './uiComponents/page-spinner/spinner-service'; 
import { authProviders } from './auth/auth.providers'; 
import { LocalStorageService} from './state/local-storage.service'; 
import {CommonModule} from '@angular/common' 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule,JsonpModule,CommonModule, 
    routing 
    // CrisisModule 
    ], 
    declarations: [ 
     AppComponent, 
     LoginComponent, 
     HomeComponent, 
     SpinnerComponent, 
     SignupComponent 

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


} 

loads.module.ts

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

    import {LoadsRoutingModule} from './loads.routing'; 
    import {LoadsService} from './services/loads.service'; 

    import { 
     LoadtypelistComponent, 
     LoadsComponent, 
     AnimalsComponent, 
     BoatComponent, 
     BulkComponent, 
     CarComponent, 
     ContainerComponent, 
     EquipmentComponent, 
     FurnitureComponent, 
     MovingHouseComponent, 
     OthersComponent, 
     PalletizedComponent, 
     ParcelsComponent, 
     LoadsShared1Component, 
     LoadsShared2Component 
    } from './components/index'; 

    @NgModule({ 
     imports: [ 
      LoadsRoutingModule 
     ], 
     declarations: [ 
      LoadtypelistComponent, 
      LoadsComponent, 
      AnimalsComponent, 
      BoatComponent, 
      BulkComponent, 
      CarComponent, 
      ContainerComponent, 
      EquipmentComponent, 
      FurnitureComponent, 
      MovingHouseComponent, 
      OthersComponent, 
      PalletizedComponent, 
      ParcelsComponent, 
      LoadsShared1Component, 
      LoadsShared2Component 
     ], 
     providers: [LoadsService] 
    }) 
    export class LoadsModule { 

    } 

コンポーネント

import {Component, AfterViewInit,OnInit} from '@angular/core'; 
import {LoadsService} from '../services/loads.service'; 
import {VehicleClass} from '../models/file1' 

@Component({ 
    selector: 'loads-parcels', 
    templateUrl: 'Loads/_LoadParcels' 
}) 
export class ParcelsComponent implements OnInit { 
    classes; 
    errorMessage:any; 

    cc=['one','two','three'] 
    constructor(private loadsService: LoadsService) {} 
    ngOnInit(){ 
    // this.loadsService.getVehicleclasses().then(classes => {this.classes = classes;},error => this.errorMessage = <any>error);   
    } 


} 

コンポーネントのテンプレート、私は次のエラーを取得

<div *ngFor="let c of cc">{{c}} 
</div> 

ngFor error

EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngForOf' since it isn't a known property of 'div'

すべてのヘルプをしてください?

+1

AppModuleにBrowserModuleをインポートしましたか? BrowserModuleは、ベースディレクティブ(* ngIf、* ngFor)の出所です。 –

+0

はい、私は をインポートしました{BrowserModule}から '@ angle/platform-b​​rowser'; –

+0

'AppModule'に' ParcelsComponent'を宣言していないようです。 –

答えて

6

あなたが使用している別のモジュールと宣言されたコンポーネントを作成しましたが、*ngIf*ngForのような一般的な指令を提供するCommonModuleをインポートするのを忘れました。 AppModuleBrowserModuleをインポートするので、をエクスポートするので、これらの指令はAppModuleで利用できるため、これを行う必要はありません。

+0

私はapp.moduleにBrowserModuleをインポートしました。どこに問題がありますか? –

+0

@AySyあなたは 'AppModule'の宣言に' ParcelsComponent'を追加しませんでした。 –

+0

はい、私は非同期ルーティングを使用しています –