Angular 4找不到不同的支持對象

Question

我在嘗試綁定或在我的應用中顯示某些數據時遇到問題。

我想這樣做是這樣的：

HTML：

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.

這是我的代碼：

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

當我運行的應用程序，我得到這個錯誤

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"; 

@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) 
); 

我想你的意思做這個：

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

當你把你的數據轉換成使用JSON.stringify一個字符串，它可以」 t由ngFor使用，因爲字符串不可迭代。相反，如果你返回data.result，這是一個數組，ngFor知道如何迭代它。

編輯：
正如yanbu在評論中指出的那樣，您的模板中還有一個bug。相反的：

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

您需要使用：

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

這是因爲價格是一個數組，它不具有財產Low，其中價格是數組的元素，這應該包含財產Low。