* ngFor不是HTML表工作（角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'); 
      }); 
    } 


}

錯誤信息 米錯誤信息Ÿ應用程序中斷，可以請你告訴我，讓我的什麼樣的變化，使工作

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

來源

2017-01-17 Yogendhar Reddy

您需要輸入CommonModule的指令*ngFor並使用let作爲garth74說：

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

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

來源

2017-01-17 07:17:31

你」只是缺少let關鍵字*ngFor

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

來源

2017-01-17 03:17:23

* ngFor不是HTML表工作（角2）

回答

相關問題