2017-01-17 66 views
2

HTML ngFor不是HTML表工作* ngFor不是HTML表工作(角2)

<!DOCTYPE html> 
<html> 

<body> 
    <div class="row"> 
     <div class="col-xs-12 col-md-offset-4"> 
      <table class="table table-striped"> 
       <tr *ngFor="category of categoriesInfo" > 
        <td data-title="'Name'"> 
         <a>{{category.CategoryName}}</a> 
        </td> 
        <td> 
         <button type="button" class="btn btn-sm">Delete</button> 
        </td> 
       </tr> 
      </table> 
     </div> 

    </div> 
</body> 
</html> 

组件 我从数据库中获取数据,但不能做ngFor,请在下面找到

import { Component,OnInit } from '@angular/core'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { CategoriesService } from './categories.component.service'; 
import { EventsEmitter } from '../../../assets/scripts/services/eventsEmitter'; 

@Component({ 
    selector: 'categories', 
    templateUrl: 'app/components/admin/categories/categories.component.html', 
    styleUrls: ['app/components/admin/categories/categories.component.css'], 
    providers: [CategoriesService] 
}) 
export class CategoriesComponent { 
    categoriesInfo: any; 

    constructor(
     private router: Router, 
     private categoriesService: CategoriesService, 
     private eventsEmitter: EventsEmitter) { 
    } 

    ngOnInit() { 
     this.getCategoriesResource(); 
    } 

    getCategoriesResource() { 
     this.categoriesService.getCategoriesResource() 
      .subscribe(response => { 
       debugger; 
       this.categoriesInfo = response; 
      }, 
      error => { 
       this.eventsEmitter.broadcast('Error', 'Error Occured'); 
      }); 
    } 


} 

错误信息 米错误信息Ÿ应用程序中断,可以请你告诉我,让我的什么样的变化,使工作

error information

APP模块 我只使用一个模块在我的应用程序

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 
import { HttpModule, JsonpModule, Http, RequestOptions, XHRBackend, RequestOptionsArgs, Response, ConnectionBackend} from '@angular/http'; 
import { AppRoutingModule } from './app.routes'; 

import { AppComponent } from './app.component'; 
import { CategoriesComponent } from './components/admin/categories/categories.component'; 


import { LoadingInterceptor } from './assets/scripts/services/loadingInterceptor'; 
import { EventsEmitter } from './assets/scripts/services/eventsEmitter'; 
import { ToasterModule} from 'angular2-toaster'; 

@NgModule({ 
    imports: [AppRoutingModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, JsonpModule, ToasterModule ], 
    declarations: [AppComponent, CategoriesComponent], 
    bootstrap: [AppComponent], 
    providers: [EventsEmitter,LoadingInterceptor, 
     { 
      provide: Http, 
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, eventsEmitter: EventsEmitter) => new LoadingInterceptor(xhrBackend, requestOptions, eventsEmitter), 
      deps: [XHRBackend, RequestOptions,EventsEmitter] 
     },{ provide: LocationStrategy, useClass: HashLocationStrategy }] 
}) 
export class AppModule { } 

回答

2

您需要输入CommonModule的指令*ngFor并使用let作为garth74说:

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

@NgModule({ 
    import:[CommonModule], 
    ... 
}) 
3

你”只是缺少let关键字*ngFor

<tr *ngFor="let category of categoriesInfo" >