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:


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';

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")
.then(response =>{return response.json() as Userdetail[]})
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);


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

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

constructor(private _userService: UserService) {

ngOnInit() {

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


<table class="table">
<td>User Name</td>
<tr *ngFor="let user of Users">

Below is output on UI

Answer Source

should be


You can also try

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

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