manish kumar manish kumar - 5 months ago 22
HTTP Question

Data is not populating in Grid in angular2

I am new to angular2. I have a simple task to get list of users from web api and show it on view. Data is returned in format of [object Object],[object Object] but it is not getting dispalyed in grid. Please see below code:

user.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Observable, Subject } from 'rxjs/Rx';
import { Userdetail } from './user';

@Injectable()
export class UserService {
private baseUrl: string = "http://localhost:54255/api/";

constructor(private _http: Http) {

}

public LoadData(): Promise<Userdetail[]> {
return this._http.get(this.baseUrl + "getusers")
.toPromise()
.then(response =>{return response.json() as Userdetail[]})
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}


user.component.ts

import { Component, OnInit } from '@angular/core';
import { Userdetail } from './user';
import { UserService } from './user.service';

@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css'],
providers: [UserService]
})
export class UserComponent implements OnInit {
Users = [];

constructor(private _userService: UserService) {
}

ngOnInit() {
this.refresh();
}

refresh() {
this._userService.LoadData().then(data => {
this.Users = data;
console.log(this.Users);
}
);
}
}


user.component.html

<table class="table">
<tr>
<td>User Name</td>
<td>Email</td>
<td>Gender</td>
</tr>
<tr *ngFor="let user of Users">
<td>{{user.userName}}</td>
<td>{{user.email}}</td>
<td>{{user.gender}}</td>
</tr>
</table>
{{Users}}


Below is output on UI

https://i.stack.imgur.com/rlP64.png

Answer Source
 <td>{{user.userName}}</td>
 <td>{{user.email}}</td>
 <td>{{user.gender}}</td>

should be

 <td>{{user.UserName}}</td>
 <td>{{user.Email}}</td>
 <td>{{user.Gender}}</td>

You can also try

 <td>{{user | json}}</td>

to see what's the actual content of the user variable.