2017-06-21 53 views
1

Im学习Angular,我正在创建一个加密货币交换应用。我创建了一个服务和一个接口来从API获取数据。现在我可以将它绑定到DOM,但我也想在我的component.ts中使用这些数据,以便我可以编写例如:Angular 4,打字稿将接口属性分配给变量

Bid2 = Bid * 2;

,然后绑定变量,以这样的DOM:{{标段2}}

感谢您的帮助。这里是我的代码:

Component.ts

import { Component, OnInit } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { BittrexService } from '../../bittrex/bittrex.service'; 
import {Observable} from "rxjs"; 
import { MarketListObject } from '../datosmoneda'; 
import { MarketPrices } from '../datosmoneda'; 

@Component({ 
    selector: 'app-comprarzec', 
    templateUrl: './comprarzec.component.html', 
    styleUrls: ['./comprarzec.component.scss'] 
}) 
export class ComprarzecComponent implements OnInit { 

    private prices = []; 


    constructor(private bittrexService: BittrexService) { 
    this.bittrexService = bittrexService; 
    } 

ngOnInit(){ 
    this.bittrexService.getPrices() 
    .subscribe(
    data => this.prices = data.result 
); 
} 
} 

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 { MarketViewModel } from '../comprarmonedas/datosmoneda' 


@Injectable() 
export class BittrexService { 

    constructor(private http: Http, private marketModel : MarketViewModel) { } 

    public getPrices() :Observable<MarketViewModel> { 
    return this.http.get('https://bittrex.com/api/v1.1/public/getmarketsummary?market=btc-zec') 
    .map((response: Response) => response.json()); 
    } 

} 

interface.ts(datosmoneda.ts);

export class MarketViewModel { 
    public success : boolean; 
    public message : string; 
    public result : MarketListObject[]; 
} 

export class MarketListObject { 
    public MarketName : string; 
    public High : number; 
    public Low : number; 
    public Volume : number; 
    public Last : number; 
    public BaseVolume : number; 
    public TimeStamp : number; 
    public Bid : number; 
    public Ask : number; 
    public OpenBuyOrders : number; 
    public OpenSellOrders : number; 
    public PrevDay : number; 
    public Created : number; 

} 

再次感谢您的帮助!

+0

制作ComprarzecComponent的公共属性,并将其称为Bid2。该模板应该能够绑定到它。当您更改该值时,模板应该注意。 –

+0

在插值中,您也可以进行数学运算:{{Bid * 2}} –

回答

1

Bid2 = Bid * 2;

,然后将该变量绑定到这样的DOM:{{标段2}}

值得注意的第一件事是,{{ Bid2 }}工作,Bid2将需要在ComprarzecComponent的属性,但BidMarketListObject的财产,所以它不会像编写Bid2 = Bid * 2那样简单。实际上,您需要为特定的MarketListObject找到Bid2,因此它更像Bid2 = prices[index].Bid * 2

例如。

component.ts

@Component({ 
    selector: 'app-comprarzec', 
    templateUrl: './comprarzec.component.html', 
    styleUrls: [ './comprarzec.component.scss' ] 
}) 
export class ComprarzecComponent implements OnInit { 
    private prices: MarketListObject[] = []; 

    constructor(private bittrexService: BittrexService) { 
    } 

    bid2(price: MarketListObject): number { 
     return price.Bid * 2; 
    } 

    ngOnInit() { 
     this.bittrexService.getPrices().subscribe(data => { 
      this.prices = data.result; 
     }); 
    } 
} 

comprarzec.component.html

<ul> 
    <li *ngFor="let price of prices"> 
     {{price.Bid}} 
     {{bid2(price)}} 
    </li> 
</ul> 

去好来,因为你是刚刚起步。人们通常会首先在Http上跳过。

1

也许我的github可以回答你的一些问题。

Ng-CC-Exchange : CryptoCurrencies Exchanges Module for Angular(2+)

的我是如何实现的订单服务

组件

getBittrexOrderBook(market) { 
if (market !== '') { 
    this._bittrexService.getOrderBook(market).subscribe(
    response => { 
     if (response.success && response.result) { 
     this._tempCurrencyBuy = response.result; 
     } else { 
     this.handleError(response.message); 
     } 
    }, 
    error => this.handleError(error) 
); 
}} 

模型

export interface BittrexOrderBook{ 
    success: boolean; 
    message: string; 
    result: BittrexOrder[]; 
} 

export interface BittrexOrder{ 
    Quantity: number; 
    Rate: number; 
} 

的Html

一例
<div class="bittrex-currencies-container"> 
<div class="bittrex-currencies-sub-container"> 
    <div class="bittrex-currencies-title"> 
     <h3 class="bittrex-currencies-title"><strong> Bittrex order book</strong></h3> 
    </div> 
    <form #form="ngForm" name="form" (ngSubmit)="submit()"> 
     <input type="text" class="search-input" placeholder="search engine" [(ngModel)]="filter" name="ngModel"> 
     <button type="submit" class="btn">submit</button> 
    </form> 
    <div class="scroll-bar"> 
     <div class="row" *ngIf="_tempCurrencyBuy.length"> 
      <div class="col-md-6"> 
       <label class="label label-default" for="bittrex-info-content">Buy orders</label> 
       <div class="bittrex-currencies" *ngFor="let currency of _tempCurrencyBuy"> 
        <div class="bittrex-info" *ngIf="currency.Quantity"> 
         <label class="label label-info" for="bittrex-info-content">Quantity</label> 
         <span id="bittrex-info-content">{{currency.Quantity}}</span> 
        </div> 
        <div class="bittrex-info" *ngIf="currency.Rate"> 
         <label class="label label-info" for="bittrex-info-content">Rate</label> 
         <span id="bittrex-info-content">{{currency.Rate}}</span> 
        </div> 
        <br> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <label class="label label-default" for="bittrex-info-content">Sell orders</label> 
       <div class="bittrex-currencies" *ngFor="let currency of _tempCurrencySell"> 
        <div class="bittrex-info" *ngIf="currency.Quantity"> 
         <label class="label label-info" for="bittrex-info-content">Quantity</label> 
         <span id="bittrex-info-content">{{currency.Quantity}}</span> 
        </div> 
        <div class="bittrex-info" *ngIf="currency.Rate"> 
         <label class="label label-info" for="bittrex-info-content">Rate</label> 
         <span id="bittrex-info-content">{{currency.Rate}}</span> 
        </div> 
        <br> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

使用API​​时的API有CORS问题,这就是为什么有一个后端与和的NodeJS Nodemon避免这个问题就会变得更加复杂。 以电子为例,问题通常可以解决,但对于网络应用程序来说,这是另一回事。

角无后端

getOrderBook(market, type = 'both', depth = 50) { 
if (market) { 
    return this._http.get(this._BASE_URL + `/getorderbook?market=${market}&type=${type}&depth${depth}`) 
     .map(response => response.json() as BittrexOrderBook) 
     .timeout(this._timeOut); 
    }} 

如果你选择在这里后端解决方案上的NodeJS侧的例子

_api.get(_BITTREX_BASEURL + '/getorderbook', (request, response) => { 
console.time("getorderbook"); 
const market = request.query.market; 
const type = request.query.type; 
const depth = request.query.depth; 
const url = `https://bittrex.com/api/v1.1/public/getorderbook?market=${market}&type=${type}&depth${depth}`; 
httpGet(url, response); 
console.timeEnd("getorderbook");}); 


function httpGet(url, response) { 
    _client.get(url, (data, resp) => { 
     response.json(data); 
    }); 
} 

另一种办法是使用代理服务为这篇文章中描述 Access-Control-Allow-Origin: Dealing with CORS Errors in Angular

还有一点需要记住,如果你想使用Bittrex的公共API以外的东西。您将需要由Bittrex生成的api密钥,使用post和HMAC-SHA512(例如:Crypto-js)。

Crypto-js : JavaScript library of crypto standards.