Trouble implementing an Angular2 front-end service

Question

My goal is to display the logged-in user’s name.

I have a back-end Express service that successfully uses Mongoose to perform MongoDB queries. I’m able to see it work with Postman. This service queries a “users” collection in the database. It takes a userId and returns the user’s firstName.

I’m encountering problems implementing an Angular2 front-end service that gets the userId from local storage, passes it to the back-end, and retrieves the user’s firstName. Then I want to use Handlebars string interpolation to insert the username wherever I want.

loggedInUser() in the code below is where I'm currently focusing.

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

When I try to use loggedInUser in a component's HTML file, I get no output when the route is rendered. The console.log call produces nothing in the browser's console; it's as if the method isn't being called.

signup.component.html

Username:  {{ loggedInUser }}

loggedInUser is a method in your component class, you should call it with (), or change it to get loggedInUser() in the class. Also it doesn' contain a string, i.e. the name of the user, but an object which can have .name property — Vega, Jul 25 '17 at 17:24
Calling loggedInUser() is part of the solution. Thank you! String interpolation only shows [object Object] though. I've tried many variations on loggedInUser().obj.firstName both in the class and in the HTML. I've been following the JSON representation of the data returned by the back-end. Maybe I need to see how the data is represented by the front end. Logging output to the console hasn't been helpful here. I get a great deal of info and don't know where to look. — Brent Payton, Jul 25 '17 at 20:31
It is indeed a part of the solution, it just caught my eye in first and I was sure you will get great help for the rest. If still not have the solution, I could look closely — Vega, Jul 25 '17 at 20:57
Please present the response you are getting from the backend, as it now seems you are getting it :) — AT82, Jul 26 '17 at 18:09

score 0 · Answer 1 · answered Jul 25 '17 at 17:34

https://angular.io/guide/cheatsheet explains various string interpolation techniques..

Are you calling your service in ngInit of component. Something like

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

html
Username: {{ user }}

Brent Payton · Answer 2 · 2017-07-26T20:34:38.067

0

As Vega wrote, "loggedInUser is a method in your component class, you should call it with ()".

{{ loggedInUser() }} resolved this problem.

There are other issues with the code I posted here so utilize it at your own risk.

On another topic, @AJT_82 asked that I share a response from the back-end. Note that the Express code that generates such a reply isn't part of my example.

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

edited Jul 26 '17 at 20:34

answered Jul 26 '17 at 20:28

Brent Payton

13
2
5

isn't `{{loggedInUser()}}` crashing your browser? Did you try **JGFMK** suggestion? Do subscribe to request and display variables in component. BTW, update your question instead of posting it as an answer :) – AT82 Jul 28 '17 at 17:32
@AJT_82, `{{ loggedInUser() }}` eventually worked. However, i've made a horrible mess of things and now nothing works again. Thank you for letting me know I should update the original question. – Brent Payton Jul 29 '17 at 20:16
Okay, but be very careful with calling methods in template... https://stackoverflow.com/a/43085186/6294072 I'm surprised you are not running into issues :) – AT82 Jul 29 '17 at 20:19

Trouble implementing an Angular2 front-end service

2 Answers2