CODEWITHSUNDEEP
angulartypescript
Abhijeet Khangarot
Abhijeet Khangarot

Reputation: 1567

Argument of type 'number' is not assignable to parameter of type 'string' in angular2.

I have been building an angular2 application using this api : https://api.coinmarketcap.com/v1/ticker/

This api returns an array of dictionaries (sample): 

[
{
    "id": "bitcoin",     <------ Wanna use this id
    "name": "Bitcoin", 
    "symbol": "BTC", 
    "rank": "1", 
    "price_usd": "9347.32", 
    "price_btc": "1.0", 
    "24h_volume_usd": "7926060000.0", 
    "market_cap_usd": "158936099373", 
    "available_supply": "17003387.0", 
    "total_supply": "17003387.0", 
    "max_supply": "21000000.0", 
    "percent_change_1h": "-0.24", 
    "percent_change_24h": "1.1", 
    "percent_change_7d": "6.62", 
    "last_updated": "1524926675"
},

I am using routing parameters to go to a different page like this: 

<tr *ngFor="let curr of currency" [routerLink]="['/currdetail',curr.id]">    <------ Here 
      <th scope="row">{{ curr.rank }}</th>
      <td>{{curr.name}}</td>
      <td>{{curr.symbol}}</td>
      <td>{{curr.market_cap_usd}}</td>
      <td>{{curr.price_usd}}</td>
      <td>{{curr.price_btc}} </td>
      <td>{{curr.available_supply}} </td>
      <td>{{curr['24h_volume_usd']}} </td>
      <td>{{curr.percent_change_1h}} </td>
      <td>{{curr.percent_change_24h}}</td>
      <td>{{curr.percent_change_7d}} </td>
    </tr>

Now i have written routes like this and included in my routing module:

export const routes: Routes = [
    { path: 'table',  component: TableComponent },
    { path: 'currdetail/:id',     component: CurrdetailComponent },
    { path: '', redirectTo: '/table', pathMatch: 'full' },
];

Currdetail component looks like this: 

import { Component, OnInit } from '@angular/core';
import { CrypdataService } from '../crypdata.service'
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-currdetail',
  templateUrl: './currdetail.component.html',
  styleUrls: ['./currdetail.component.css'],
  providers: [CrypdataService],
})
export class CurrdetailComponent implements OnInit {

  private curr;

  constructor(private crypdataservice: CrypdataService, private route: ActivatedRoute, private location: Location) { }

  ngOnInit() {
  let id = +this.route.snapshot.params['id'];
  this.curr = this.crypdataservice.getcurr(id);
  }

  goBack(): void{
    this.location.back();
  }

}

Here is the crypdataservice file: 

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class CrypdataService {

  private baseUrl: string = 'https://api.coinmarketcap.com/v1/ticker/';

  constructor(private http: Http) { }

  getcurr(id : string){
      return this.http.get(`https://api.coinmarketcap.com/v1/ticker/`+id).map((res:Response) => res.json());
  }

  getall(){
      return this.http.get(`https://api.coinmarketcap.com/v1/ticker/`).map((res:Response) => res.json());
  }
}

It gives the following error : 

ERROR in src/app/currdetail/currdetail.component.ts(20,44): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

I never specified id as a number, so can't figure out what is going wrong. Thanks for reading.

I want to use the api for details of the particular currency : https://api.coinmarketcap.com/v1/ticker/bitcoin/ <---- this is the id

Upvotes: 1

Views: 5206

Answers (1)

bugs
bugs

Reputation: 15323

Remove the + in your id declaration:

let id = this.route.snapshot.params['id'];

so that when you call getcurr(id) TypeScript doesn't think that id is a number

Unary plus (+) (docs)

The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values true, false, and null. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to NaN.

Upvotes: 1

Related Questions