Angular 4 typescript Assign interface property to variable

0 votes

Im learning Angular and I'm creating a cryptocurrency exchange app. I created a service and an interface to get the data from an API. Now I can bind it to the DOM but I also want to use this data in my component.ts so I can write for example:

Bid2 = Bid * 2;

and then bind that variable to the DOM like this: {{ Bid2 }}

Thanks for your help. Here is my code:

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; 

}
Aug 27, 2018 in Blockchain by digger
• 26,740 points
4,067 views

1 answer to this question.

0 votes

The first thing worth noting is that for {{ Bid2 }} to work, Bid2 would need to be a property on ComprarzecComponent, but Bid is a property on MarketListObject, so it won't be as simple as just writing Bid2 = Bid * 2. You'll actually need to find the Bid2 for a particular MarketListObject, so it would be more like Bid2 = prices[index].Bid * 2.

For example.

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>


Hope this will solve your problem.

To know more about Angular, I would recommend you to join Angular online course today.

Thanks.

answered Aug 27, 2018 by slayer
• 29,370 points

Related Questions In Blockchain

0 votes
1 answer

Angular 4: not able to iterate over an array

Replace this : <div *ngFor="let price of prices"> ...READ MORE

answered Sep 3, 2018 in Blockchain by digger
• 26,740 points
1,068 views
0 votes
1 answer
0 votes
1 answer

How to set web3 solidity variable value?

The setLog transaction has not yet been mined by ...READ MORE

answered Jul 6, 2018 in Blockchain by Christine
• 15,790 points
2,156 views
0 votes
2 answers

Laravel 5.4 to get data form API response

Input::get('var_name') READ MORE

answered Feb 14, 2019 in Blockchain by anonymous
1,928 views
+1 vote
1 answer

Protocols used in a distributed/dlt system for the nodes to establish communication

yes all are over TCP/IP connections secured ...READ MORE

answered Aug 6, 2018 in Blockchain by aryya
• 7,460 points
1,459 views
0 votes
1 answer

Truffle tests not running after truffle init

This was a bug. They've fixed it. ...READ MORE

answered Sep 11, 2018 in Blockchain by Christine
• 15,790 points
1,942 views
0 votes
1 answer

Hyperledger Sawtooth vs Quorum in concurrency and speed Ask

Summary: Both should provide similar reliability of ...READ MORE

answered Sep 26, 2018 in IoT (Internet of Things) by Upasana
• 8,620 points
1,468 views
0 votes
4 answers

How to solve “bind: cannot assign requested address” Error?

You must mention in your host.conf file ...READ MORE

answered Jul 31, 2018 in Blockchain by slayer
• 29,370 points
14,630 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP