I am currently in the process of developing a currency exchange application using Angular 4, but I have encountered an issue when trying to update a property value. Allow me to elaborate:
My app includes a service that fetches the current Bitcoin price in Chilean Pesos (CLP) from an API Service and stores this information in an Interface. My goal is to automatically convert a user-input CLP amount into BTC. Initially, I tested this functionality with a hardcoded random number.
Component.ts:
exchangeRate : 715000;
targetAmount = 1;
baseAmount = this.exchangeRate;
update(baseAmount) {
this.targetAmount = parseFloat(baseAmount) / this.exchangeRate;
}
and here is the corresponding DOM:
<div class="form-group">
<label for="company">Monto en CLP</label>
<input type="number" class="form-control" id="company" placeholder="Ingrese el monto en CLP" (input)="update($event.target.value)">
</div>
This initial setup worked perfectly, but then I decided to dynamically retrieve the exchange rate from the API Service by adding the following lines of code:
Component.ts
minask(price: SurbtcMarketView): number {
return price.min_ask;
}
Interface.ts
export class SurbtcMarket {
public ticker: SurbtcMarketView;
}
export class SurbtcMarketView {
public last_price : number;
public min_ask : number;
public max_bid : number;
public volume : number;
public price_variation_24h : number;
public price_variation_7d : number;
}
Now, instead of using a static value like 715000 for the exchange rate, I want to utilize the minask function as follows:
exchangeRate : this.minask;
targetAmount = 1;
baseAmount = this.exchangeRate;
update(baseAmount) {
this.targetAmount = parseFloat(baseAmount) / this.exchangeRate;
}
However, when attempting to use `this.exchangeRate` in the calculation, I encounter the following error:
The right-hand side of an arithmetic operation must be of type 'any', 'number', or an enum type
Can anyone provide guidance on how to address this issue? Thank you for your assistance!
EDIT:
Below is the service responsible for fetching the data used in setting `this.exchangeRate`:
service.ts
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Observable} from "rxjs";
import 'rxjs/Rx';
import 'rxjs/add/operator/catch';
import { SurbtcMarket } from './surbtcmarket'
@Injectable()
export class SurbtcService {
constructor(private http: Http) { }
public getPricess() :Observable<SurbtcMarket> {
return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker')
.map((response: Response) => response.json());
}
}