Angular 4,打字稿将接口属性分配给变量
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;
}
再次感谢您的帮助!
Bid2 = Bid * 2;
,然后将该变量绑定到这样的DOM:{{标段2}}
值得注意的第一件事是,{{ Bid2 }}
工作,Bid2
将需要在ComprarzecComponent
的属性,但Bid
是MarketListObject
的财产,所以它不会像编写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上跳过。
也许我的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)。
制作ComprarzecComponent的公共属性,并将其称为Bid2。该模板应该能够绑定到它。当您更改该值时,模板应该注意。 –
在插值中,您也可以进行数学运算:{{Bid * 2}} –