Menu
html ngFor not working for html table
<!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>
component I am getting the data from database but unable to do a ngFor ,Please find the error Information below
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 my application breaks , can you please tell me what changes do i make to make it work
App Module I am using only one module in my application
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 { }
913
You need to import CommonModule for directive *ngFor and use let as garth74 said:
import { CommonModule } from '@angular/common';
@NgModule({
imports: [ CommonModule ], // use 'imports' not 'import', s is mandatory
...
})
You're just missing the let keyword in *ngFor
<tr *ngFor="let category of categoriesInfo" >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
