Question

我正在尝试使用新的Public API V2 CoinMarketCap，但我正在尝试使用它。

JSON：

https://api.coinmarketcap.com/v2/ticker/?limit=10

我的模特硬币：

export class Coins {
    id: string;
    name: string;
    symbol: string;
    rank: number;
    price_usd: number;
    price_btc: number;
    _24h_volume_usd: number;
    market_cap_usd: number;
    available_supply: number;
    total_supply: number;
    percent_change_1h: number;
    percent_change_24h: number;
    percent_change_7d: number;
    last_updated: number;
}

我的服务：

urlBase = 'https://api.coinmarketcap.com/v2/ticker/?limit=10';
getCoins() {
   return Observable
   .timer(0, 5000)
   .flatMap(() =>  this.http.get(this.urlBase))
   .pipe(
      map(res => res), 
      catchError(this.handleError)
    )
}

我的组件：

coins: Coins[];
getCoins() {
  this.coinsService.getCoins().subscribe(
    data => {
      this.coins = data;
    });
}

我的HTML：

<div class="card card-inverse" *ngFor="let coin of coins">

输出：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 
'object'. NgFor only supports binding to Iterables such as Arrays.

任何建议？

谢谢

Answer 1

从您显示的api数据中，我看到您正在为this.coins分配对象而不是数组。您应该先将其转换为数组，然后将其分配给this.coins。

getCoins() {
  this.coinsService.getCoins().subscribe(
    data => {
      this.coins = [];
      for(let key in data){
          this.coins.push(data[key]);
       }
    });
}

否则你也可以这样做将对象转换为数组。

getCoins() {
      this.coinsService.getCoins().subscribe(
        data => {
          this.coins = [];
          Object.keys(data).map((key)=>{ this.coins.push(data[key]) });
        });
}

在您的服务文件中

getCoins() {
    return this.http.get(this.urlBase).pipe(map(res => res = res.json()['data']))
}

工作DEMO

Answer 2

您只是因为正在迭代对象而遇到此错误。您需要迭代对象数组。

在mycomponent文件中尝试以下代码。

getCoins() {
this.coinsService.getCoins().subscribe(
    data => {
        let coins = [];
        for (let key in data) {
            coins.push(data['key']);
        }
      this.coins = coins;
    });
}

Answer 3

在服务中：

getCoins(): Observable<any> {
  const api = 'https://api.coinmarketcap.com/v2/ticker/?limit=10';
  return this.httpClient.get(api);    
}

组件中的

：

getCoins() {
    this.appService
      .getCoins()
      .subscribe(
        data => this.coins = data.data,
        error => console.log(error)
      );
  }

  coinKeys(coins) {
    return Object.keys(coins);
}

模板中的

：

<tr *ngFor="let k of coinKeys(coins )">
    <td>{{ coins[k].id }}</td>
</tr>

Answer 4

好的我试过你的例子，我发现它有些问题。不知道你用计时器想要实现什么，所以不要让它变得简单。得到的回复是：{ data: [], metadata: [] }

所以我假设在你的地图中你需要像这样map(res => res.data)进行映射以显示数据属性，例如

我重写了一个简单的例子：

  getCoins() {
    const urlBase = "https://api.coinmarketcap.com/v2/ticker/?limit=10";
    this.http
      .get(urlBase)
      .pipe(map(res => res))
      .subscribe(res => console.log(res));
  }

要获取数据属性，请将上面的地图更改为.pipe(map(res => res.data))

为避免ts错误，您也可以输入： .pipe(map((res: { data: any; metadata: any }) => res.data))

您还需要一些aditional映射，以便数据与您的Coin界面匹配

如果你找不到办法，我可以提供更多帮助;）

Answer 5

this.coins = data.json()或者你可以使用observable。
在html中<div class="card card-inverse" *ngFor="let coin of coins | async">
在组件中

coins: Observable<Coin[]>;

getCoins() { this.coins = this.coinsService.getCoins(); }

Angular - 如何获得JSON对象的结果？

5 个答案: