实现Angular2前端服务时遇到麻烦

Question

我的目标是显示登录的用户名。

我有一个后端快速服务，它成功地使用Mongoose来执行MongoDB查询。我能看到它和邮差一起工作。此服务查询数据库中的“用户”集合。它接受一个userId并返回用户的firstName。

我在实现Angular2前端服务时遇到了问题，该服务从本地存储获取userId，将其传递给后端，并检索用户的firstName。然后，我想要使用把手，字符串插值，插入用户名，我想在任何地方。

下面代码中的loggedInUser()是我目前关注的焦点。

auth.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs';

import { User } from './user.model';
import { ErrorService } from '../errors/error.service';

@Injectable()
export class AuthService {
  constructor(private http: Http, private errorService: ErrorService) {}

  loggedInUser() {
    const userId = localStorage.getItem('userId');
    console.log('Service) User ID:'  + userId);
    return this.http.get('htp://localhost:3000/user/current/' + userId)
      .map((response: Response) => {
         const user = response.json().obj;
         return user;
      })
  };

当我试图在组件的HTML文件中使用loggedInUser时，在呈现路由时没有输出。console.log调用在浏览器的控制台中不会产生任何结果；就好像方法没有被调用一样。

signup.component.html

Username:  {{ loggedInUser }}

Answer 1

https://angular.io/guide/cheatsheet解释了各种字符串插值技术。

是否在组件的ngInit中调用您的服务。有点像

export class MyComponent implements ngOnInit {
  user: User
  constructor (private authService:AuthService) {}
  onInit{
    this.authService.subscribe((data:User) => this.user = data)
  }
}

html

用户名：{{ user }}

Answer 2

正如Vega所写的，"loggedInUser是组件类中的一个方法，您应该用()调用它“。

{{ loggedInUser() }}解决了这个问题。

，我在这里发布的代码还有其他问题，所以使用它会有您自己的风险。

关于另一个话题，@AJT_82要求我分享后端的回应。请注意，生成这样一个答复的Express代码不是我的示例的一部分。

{
    "message": "Success",
    "obj": {
        "_id": "596925d7ccf72260bc37a0df",
        "firstName": "Test2"
    }
}