javascript - 无法读取 Angular2 中的字符串插值

Question

我正在订阅一项服务，该服务返回一个具有属性(firstName、lastName、email等)

我无法在我的 View 中显示该值。如果我写 {{ user }} 浏览器会显示 [object Object]，但是当我输入 {{ user.firstName }} 我得到错误提示未定义的属性。

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;
        }
      );
    }    
}

来 self 的 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())); 
    }

Answer 1

您的模板呈现速度快于您的服务返回数据的速度。尝试以下方法解决问题:

<h1>This is my profile page!</h1>
<div>
  {{ user?.firstName }}
</div>