Angular 4， typescript 将接口(interface)属性分配给变量

Question

我正在学习 Angular，并且正在创建一个加密货币交换应用程序。我创建了一个服务和一个接口(interface)来从 API 获取数据。现在我可以将它绑定(bind)到 DOM，但我也想在我的 component.ts 中使用这些数据，所以我可以这样写:

出价2 = 出价* 2;

然后像这样将该变量绑定(bind)到 DOM:{{ Bid2 }}

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

组件.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
  );
}
 }

服务.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

Bid2 = Bid * 2;

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

首先要注意的是，要使 {{ 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 的东西绊倒。