Angular 4 typescript Assign interface property to variable

Question

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; 

}

Answer 1

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.