Snapshot Parameter / Services returning NaN in Angular 2

Question

I am having trouble passing parameters from one component to the next using a router and activated route in Angular2

My EdmundsAPI Service:

  getModels(makeNiceName: string): Observable<Models> {
    return this.http.get(this.baseURL +
      + makeNiceName + '/models?year=2017&view=basic' + this.apiKey)
      .map(res => res.json())
      .catch(this.handleError);
  }

My 'from' component (Makes):

  goToModels(makeNiceName: string): void {
    this.router.navigate ( [ '/models', { data: makeNiceName } ] );
  }

My 'to' component (Models):
(Variable 'makeNiceName' after 'export class' declaration):

 makeNiceName: string = this.route.snapshot.params[ 'data' ];

  getModels(): void {
    this._EdmundsAPIService.getModels(this.makeNiceName)
      .subscribe(
        //Do Stuff here
        error =>  this.errorMessage = <any>error);
  }

My API URL from Models.getModels() (from Chrome Browser Inspect --> Network):

BaseURL + /NaN/ models?year=2017&view=basic + apiKey

Why is NaN being in place of my 'makeNiceName' variable, which is a string which I would like to pass to my Services to make a URL

Answer 1

Your function getModels has two plusses in a row, which seems to insert NaN into a string.

Similarly, when I evaluate 'string' + + 'hello' the result is "stringNaN". But when I try 'string' + + 123 the result is "string123"

Try this:

getModels(makeNiceName: string): Observable<Models> {
  return this.http.get(this.baseURL +
    makeNiceName + '/models?year=2017&view=basic' + this.apiKey)
    .map(res => res.json())
    .catch(this.handleError);
}