CODEWITHSUNDEEP
asp.net-coreangular2-ngfor
AllramEst
AllramEst

Reputation: 1449

Angular 2 / ASP.NET Core *ngFor loop issue

I am having problems displaying information from an database to the angular 2 *ngFor loop. This is my code so far:

.Net Core controller:

     // GET: api/Hats
    [HttpGet("GetHats")]
    public IEnumerable<Hat> GetHats()
    {
        return _context.Hat;
    }

hat-list.component.ts:

    //Imports from @Angular
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

//Other imports
import { HatListService } from '../service/service.component';
import Hat = App.Models.IHat;
//Component Config
@Component({
    selector: 'hat-list',
    templateUrl: './hat-list.component.html',
     providers: [HatListService]
})
//Class
export class HatListComponent implements OnInit {

    public Hats: any[];
    constructor(public _hatListService: HatListService) {

    }


    //OnInit
    ngOnInit() {
        this.getAllHats();
    }

    //Get All 
    getAllHats() {
        //debugger
        this._hatListService.getHatList().subscribe(foundHats =>
            this.Hats = foundHats
        );
    }
}

service.component.ts

//imports from Angular
import { Injectable, Component } from '@angular/core';
import { Http, Request, RequestMethod, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
//Other imports
import Hat = App.Models.IHat;
@Component({
    providers: [Http]
})
//Exported class
@Injectable()
export class HatListService {

    public headers: Headers;

    constructor(private _http: Http) {
    }

    public _getUrl: string = '/api/Hats/GetHats';

    //Get
    getHatList(): Observable<Hat[]> {
        //debugger
        return this._http.get(this._getUrl).map(res => <Hat[]>res.json())
            .catch(this.handleError);
    }


    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Opps!! Server error');
    }
}

hat-list.component.html:

<table class="table table-hover table-striped table-responsive">
    <thead>
        <tr>
            <th>Name</th>
            <th>Color</th>
            <th>Count</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let hat of Hats"">

            <td>{{hat.Name}}</td>
            <td>{{hat.Color}}</td>
            <td>{{hat.Count}}</td>
            <td>
                <a class="glyphicon glyphicon-remove" (click)="delete(hat)"></a>
            </td>
        </tr>
    </tbody>
</table>

Picture of the table enter image description here

The *ngFor recives the value.

enter image description here

I know the request to the database happens asynch and that one problem might be that the *ngfor loop fires before the data has returned and thus no information is displayed. But diffrent articles on the net say that the *ngFor loop shouldt fire unless the iterable has a value. The strange thing is that when I update the database manually thru SSMS the *ngfor recognises the added content add creates additioanl rows. What am I doing wrong.

Thanx for all the help!

Upvotes: 1

Views: 365

Answers (1)

Alexey Andrushkevich
Alexey Andrushkevich

Reputation: 6162

There are wrong variable names used in the template i.e. {{hat.Name}} instead of {{hat.name}}.

Upvotes: 1

Related Questions