*ngFor not working for html table(angular 2)

Question

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

Community · Accepted Answer · 2018-09-06 08:37:30Z

6

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
  ...
})

edited Sep 6, 2018 at 8:37

CommunityBot

11 silver badge

answered Jan 17, 2017 at 7:17

Alexander Surkov

1,7212 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2017-01-17 03:18:56Z

3

You're just missing the let keyword in *ngFor

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

edited Jan 17, 2017 at 3:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jan 17, 2017 at 3:17

Garth Mason

8,0415 gold badges35 silver badges41 bronze badges

Comments

Jean-Luc Barat · Accepted Answer · 2024-02-27 18:10:28Z

0

I've been facing this problem and spent three days trying to understand what's happening in my case.

I'm new to Angular, so I've been following some tutorials and transitioning from a standalone component bootstrapped in main.ts using the BootstrapApplication method to using modules.

I changed the bootstrap to BootstrapModule in main.ts in order to load the module and remove standalone options and move imports from the behavior

Hope this helps.

edited Feb 27, 2024 at 18:10

answered Feb 27, 2024 at 18:05

Jean-Luc Barat

1,16511 silver badges19 bronze badges

Collectives™ on Stack Overflow

*ngFor not working for html table(angular 2)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related