Angular - как получить результат объекта JSON?

Вы получили эту ошибку только потому, что выполняете итерацию объекта. Вам нужен массив объектов для перебора.

Попробуйте код ниже в вашем файле mycomponent.

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

Из данных 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']))
}

Рабочий ДЕМО

this.coins = data.json() или вы можете использовать наблюдаемый.
в html <div class = "card card-inverse" *ngFor = "let coin of coins | async">
в компоненте

coins: Observable<Coin[]>;

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

в сервисе:

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.info(error)
      );
  }

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

в шаблоне:

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

Хорошо, я попробовал ваш пример и вижу некоторые проблемы с ним. Не уверен, чего вы пытаетесь достичь с помощью таймера, поэтому не усложняйте его. Я получаю такой ответ: { 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.info(res));
  }

Чтобы получить свойство данных, измените приведенную выше карту на .pipe(map(res => res.data)).

Чтобы избежать ошибки ts, вы также можете ввести ее: .pipe(map((res: { data: any; metadata: any }) => res.data))

Вам также понадобится дополнительное сопоставление данных, чтобы соответствовать вашему интерфейсу Coin.

Я могу больше помочь, если ты не сможешь найти способ сделать это;)