角4異なるサポートオブジェクトが見つかりません

Question

私のアプリケーションにデータをバインドまたは表示しようとして問題が発生しました。

私はこのようにそれをやってみたい：

HTML：

<div *ngFor="let price of prices"> 
{{prices.Low}} 
</div> 

私はアプリを実行したときに、私はこのエラーを取得：

Error: Cannot find a differ supporting object '{"success":true,"message":"","result":[{"MarketName":"BTC-LTC","High":0.01242,"Low":0.01101255,"Volume":125744.75175454,"Last":0.01129999,"BaseVolume":1456.43310343,"TimeStamp":"2017-06-01T21:49:12.573","Bid":0.01126674,"Ask":0.0113,"OpenBuyOrders":1390,"OpenSellOrders":3345,"PrevDay":0.01119779,"Created":"2014-02-13T00:00:00"}]}' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

これは私のコードです：

コンポーネント.ts

import { Component, OnInit } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { BittrexService } from '../bittrex/bittrex.service'; 
import {Observable} from "rxjs"; 

@Component({ 
    selector: 'app-comprarmonedas', 
    templateUrl: './comprarmonedas.component.html', 
    styleUrls: ['./comprarmonedas.component.scss'] 
}) 
export class ComprarmonedasComponent implements OnInit { 

    prices: any; 

    constructor(private bittrexService: BittrexService) { 
    this.bittrexService = bittrexService; 
    } 

ngOnInit(){ 
    this.bittrexService.getPrices() 
    .subscribe(
    data => this.prices = JSON.stringify(data) 
); 
} 
} 

` 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-ltc') 
    .map((response: Response) => response.json()); 
    } 

} 

Marketviewmodel：

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

問題は、文字列ではなく、配列を反復処理しようとしているということです。 component.tsで
次のコード行があります

this.bittrexService.getPrices() 
    .subscribe(
    data => this.prices = JSON.stringify(data) 
); 

をそして、私はあなたの代わりにこれを行うためのものだと思う：あなたはJSON.stringifyを使用して文字列にデータを回すと

this.bittrexService.getPrices() 
    .subscribe(
    data => this.prices = data.result 
); 

、それはすることができます文字列は反復可能ではないため、ngForによって使用されます。代わりに、data.result（配列）を返すと、ngForはそれを反復処理する方法を知っています。

編集：
yanbuはコメントに指摘されているように、テンプレートに別のバグがあります。代わりに：価格は不動産価格が、その配列の要素をあるLowを、持っていない配列、すべきであるため

<div *ngFor="let price of prices"> 
    {{price.Low}} 
</div> 

これは、次のとおりです。

<div *ngFor="let price of prices"> 
    {{prices.Low}} 
</div> 

あなたは使用する必要がありますプロパティーはLowです。