I am subscribing to a service that is returning a working `User` object with properties (`firstName`, `lastName`, `email`, etc.)

I am not able to display the value in my view. If I write `{{ user }}` the browser displays `[object Object]`, but when I put `{{ user.firstName }}` I get errors saying undefined property. 

```
import { Component, OnInit } from "@angular/core";
import { AuthService } from "./auth.service";
import { Router } from "@angular/router";
import { User } from "./user.model";
import { Message } from "../messages/message.model";
import { FormsModule } from "@angular/forms";

@Component({
    selector: 'app-profile', 
    template: `
    <h1>This is my profile page!</h1>
    <div>
      {{ user.firstName }}
    </div>

    `
})

export class ProfileComponent implements OnInit {

    user: User;

    constructor(private authService: AuthService, private router: Router) {}

    ngOnInit() {
      this.authService.getUser().subscribe(
        (user: User) => {
        console.log(user.firstName);    //returns firstName of user object in console
        this.user = user;
        }
      );
    }    
}

```

and from my authService

```
getUser()  {
      const userId = localStorage.getItem('userId');
      const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
      return this.http.get('http://localhost:3000/user/' + userId + token) 
      .map((response: Response) => {
      const user = response.json();
      let profileUser = new User(user.obj.email, user.obj.password, user.obj.firstName, user.obj.lastName);
      this.profileUser = profileUser;
      console.log(profileUser);
      return this.profileUser;
      })
      .catch((error: Response) => Observable.throw(error.json())); 
    }

```