* 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)

ответ

Смежные вопросы