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

Question

我在尝试在我的应用中绑定或显示某些数据时遇到问题。

我想这样做：

html:

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

我在运行应用程序时收到此错误：

错误：找不到不同的支持对象 '{"success":true,"message":"","re​​sult":[{"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"}]}' 类型为“字符串”。 NgFor 只支持绑定到 Arrays 等 Iterables。

这是我的代码：

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

` 服务.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());
  }

}

市场视图模型：

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 将数据转换为字符串时，ngFor 无法使用它，因为字符串不可迭代。相反，如果你返回 data.result，它是一个数组，ngFor 知道如何迭代它。

编辑：
正如 yanbu 在评论中指出的那样，您的模板中还有另一个错误。而不是：

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

你需要使用：

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

这是因为价格是一个数组，它没有属性Low，其中价格是该数组的一个元素，它应该包含属性Low。