spring mvc - JSON Data not being displayed in Angular 2 component -

i new spring mvc , angular 2. have been working on building web application side project. have been able pretty far spring mvc app wanted migrate angular 2 front end. have followed quick start procedures on angular.io , seem doing okay. next step angular service retrieve data spring mvc rest controller.

i have been able send controller retrieve list of users , controller sends application/json object. problem users not showing in browser. not seeing errors in lite-server window , not sure how troubleshoot why data not getting displayed. can find issue?

usercomponent.ts:

import { component, oninit, ondestroy } '@angular/core'; import { router } '@angular/router';  import { user }              './user'; import { userservice }       './user.service'; import { role }              '../roles/role';  @component({      templateurl: '/app/users/user.component.html',     providers: [ userservice] }) export class usercomponent implements oninit {       errormessage: string;       users: user[];       mode = 'observable';       constructor (private userservice: userservice) {}        ngoninit() { this.getusers(); }        getusers() {         this.userservice.getusers()                          .subscribe(                            users => this.users = users,                            error =>  this.errormessage = <any>error);       }      } 

usercomponent.html:

<h2>my user component page</h2>      <h3>users:</h3>     <ul>       <li *ngfor="let user of user">         {{user.username}}       </li>     </ul>     <div class="error" *ngif="errormessage">{{errormessage}}</div> 

user.service.ts:

import { injectable }     '@angular/core'; import { http, response } '@angular/http'; import { user }           './user'; import { observable }     'rxjs/observable'; @injectable() export class userservice {   constructor (private http: http) {}   private usersurl = 'http://serverip/labtool/users';  // url web api   getusers (): observable<user[]> {     return this.http.get(this.usersurl)                     .map(this.extractdata)                     .catch(this.handleerror);   }   private extractdata(res: response) {     let body = res.json();     return body.data || { };   }   private handleerror (error: any) {     // in real world app, might use remote logging infrastructure     // we'd dig deeper error better message     let errmsg = (error.message) ? error.message :       error.status ? `${error.status} - ${error.statustext}` : 'server error';     console.error(errmsg); // log console instead     return observable.throw(errmsg);   } } 

wireshark screenshot showing returned array:

user class:

import { role } '../roles/role' export class user {   constructor(     public id: number,     public firstname: string,     public lastname: string,     public username: string,     public password: string,     public email: string,     public enabled: boolean,     public roleid:  role) { } } 

update:

i able use chrome developer tools show in browser data getting there, data not being rendered in component page. below data network headers in chrome. there problem encoding differences request , answer?

the data being returned spring mvc rest controller hosted on tomcat 8 server in eclipse. angular 2 front end running off lite-server , edited vs code. haven't yet figured out how merge 2 projects together. come later.

additionally, if copy response data chrome browser , use in inmemorybackendservice , inmemorydataservice (like heroes tutorial on angular.io web site) data show in component. formatting seems fine, not sure why data rest controller not getting populated in component page.

general: request url:http://<server ip>/labtool/users request method:get status code:200 ok remote address:10.133.137.55:80   response headers: access-control-allow-origin:* cache-control:no-cache, no-store, max-age=0, must-revalidate content-type:application/json;charset=utf-8 date:thu, 07 jul 2016 10:27:01 gmt expires:0 pragma:no-cache server:apache-coyote/1.1 transfer-encoding:chunked x-content-type-options:nosniff x-frame-options:deny x-xss-protection:1; mode=block   request headers: accept:*/* accept-encoding:gzip, deflate, sdch accept-language:en-us,en;q=0.8 cache-control:no-cache connection:keep-alive host:<server ip> origin:http://localhost:3000 pragma:no-cache referer:http://localhost:3000/users user-agent:mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, gecko) chrome/51.0.2704.103 safari/537.36 

i getting exception in console. have seen other posts suggesting use of pipe convert json object array use in *ngfor template. why doesn't getusers() procedure in user.service.ts take care of already? missing in procedure or have use pipe?

cannot find differ supporting object '[object object]' of type 'object'. ngfor supports binding iterables such arrays. 

in template have typo. instead of variable users used user loop through.

<ul>   <li *ngfor="let user of users">     {{user.username}}   </li> </ul>