2017-06-21 64 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.