Creating an angular2 application has been my recent project, utilizing the following API:
This particular API provides an array of dictionaries (here's a sample):
[
{
"id": "bitcoin", <------ The focus is on 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"
},
To navigate to different pages, I implement routing parameters in this manner:
<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>
I define the routes and include them in the routing module as follows:
export const routes: Routes = [
{ path: 'table', component: TableComponent },
{ path: 'currdetail/:id', component: CurrdetailComponent },
{ path: '', redirectTo: '/table', pathMatch: 'full' },
];
The structure of the Currdetail component is 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 are the contents of 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());
}
}
A specific error message pops up:
ERROR in src/app/currdetail/currdetail.component.ts(20,44): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
The issue arises from assigning a number as the ID without specification. Any insights would be appreciated. Thank you for your attention.
The intent is to utilize the API to retrieve details of a selected currency: <---- identified by this ID