Question

我试图在Angular中创建货币转换器。我自己做了很好的事情，按照预先确定交换率的教程。现在我想使用http模块从API获得交换率，但似乎我得到一个未定义的值，因为我的汇率在我的html中显示为NaN。货币转换器使用选择选项，用户可以选择他们想要的任何货币。如果我选择欧元/英镑，我会将NaN作为汇率，这是我从服务中获得的价值。

感谢您的帮助！

app.component

import { Component, OnInit } from '@angular/core';
import { AllRatesService } from './allrates.service';

@Component({
  selector: 'app-root',
  template: `
    <input type="number" [(ngModel)]="baseAmount"
      [class.error]="isInvalid(baseAmount)">
    <currency-select [(selected)]="baseCurrency"></currency-select>
    = <strong>{{targetAmount | fixed:2}}</strong>
    <currency-select [(selected)]="targetCurrency"></currency-select>
    <p *ngIf="isInvalid(baseAmount)">Please enter a valid amount</p>
  `
})
export class AppComponent implements OnInit {

  baseCurrency = 'USD';
  targetCurrency = 'GBP';
  baseAmount = 1;
  clpbtc: number;

  constructor(private rateService: AllRatesService) { }

  private exchangeRates = {
      "EUR/GBP": this.clpbtc,
      "EUR/USD": 1.1397,
      "GBP/EUR": 1.2478,
      "GBP/USD": 1.4225,
      "USD/EUR": 0.8778,
      "USD/GBP": 0.7029
    };

  get targetAmount() {
    const exchangeRate = this.getExchangeRate(this.baseCurrency, this.targetCurrency);
    return this.baseAmount * exchangeRate;
  }

  getExchangeRate(baseCurrency: string, targetCurrency: string) {
    if (baseCurrency === targetCurrency) {
      return 1;
    }
    return this.exchangeRates[baseCurrency +'/'+ targetCurrency];
  }

  isInvalid(value) {
    return !Number.isFinite(value);
  }

  ngOnInit() {
    this.rateService.getClpBtc()
    .subscribe(prices => {
      this.clpbtc = prices.ticker.min_ask[0];
    })
  }
}

货币select.component

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AllRatesService } from './allrates.service';

@Component({
  selector: 'currency-select',
  template: `
    <select [ngModel]="selected" (ngModelChange)="onSelectedChange($event)">
      <option *ngFor="let currency of supportedCurrencies" [value]="currency">
        {{currency}}
      </option>
    </select>
  `
})
export class CurrencySelectComponent {

  @Input() selected: string;
  @Output() selectedChange = new EventEmitter<string>();

  supportedCurrencies: string[];

  constructor(allrates: AllRatesService) {
    this.supportedCurrencies = allrates.supportedCurrencies;
  }

  onSelectedChange(selected: string) {
    this.selected = selected;
    this.selectedChange.emit(selected);
  }
}

服务

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from "rxjs";
import { SurbtcMarket } from './surbtcmarket';

@Injectable()
export class AllRatesService {

  constructor(private http: Http) {}

  supportedCurrencies = ['EUR', 'GBP', 'USD'];

  public getClpBtc() :Observable<SurbtcMarket> {
    return Observable.interval(15000)
      .startWith(0)
      .switchMap(() => {
        return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker')
        .map((response: Response) => response.json());
      });
    }
  }

Angular Currency Converter，来自HTTP的未定义响应

0 个答案: