title: Angular 6 API JSON ngFor Not Showing
body: <p>I am working on a project using Angular 6 for the first time, and I am creating an application that gets JSON data from an online URL, listing each entry on a HTML page. Each entry has a variable key value, paired with an array of variables. The problem is that, despite not showing any errors, the *ngFor statement does not show any of the entries, yet the {{ jsonData | json }} shows that the data is returned successfully. Here is my code.</p>
  
  <p><strong>api-retrieval-service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';
  import { catchError } from 'rxjs/operators';
  import { throwError } from 'rxjs';
  import { CoinListing } from './coinListing';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ApiRetrievalService {
    constructor(private _http: HttpClient) { }
  
    coinList() {
      return this._http.get('https://min-api.cryptocompare.com/data/all/coinlist').pipe(catchError(this.errorHandler));
    }
  
    errorHandler(error: HttpErrorResponse) {
       return throwError(error);
    }
  } 
  </code></pre>
  
  <p><strong>coinlist.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ApiRetrievalService } from '../api-retrieval.service';
  import { CoinListing } from '../coinListing';
  
  @Component({
    selector: 'app-coinlist',
    templateUrl: './coinlist.component.html',
    styles: []
  })
  export class CoinlistComponent implements OnInit {
    title = 'Coin Listing';
    public _jsonData:CoinListing[] = [];
    constructor(private _apiRetrieval: ApiRetrievalService) { }
    ngOnInit() {
      this._apiRetrieval.coinList()
        .subscribe(
          result =&gt;  {
            this._jsonData = result.Data;
            console.log('Success', result.Data);
          },
          error =&gt; this.errorMsg = error.statusText
       );
    }
  }
  </code></pre>
  
  <p><strong>coinListing.ts</strong></p>
  
  <pre><code>export interface CoinListing {
    [key:string]: {
      Algorithm: string;
      BuiltOn: string;
      CoinName: string;
      FullName: string;
      FullyPremined: string;
      Id: string;
      ImageUrl: string;
      IsTrading: string;
      Name: string;
      PreMinedValue: string;
      ProofType: string;
      SmartContractAddress: string;
      SortOrder: string;
      Sponsored: string;
      Symbol: string;
      TotalCoinSupply: string;
      TotalCoinsFreeFloat: string;
      Url: string;
    }
  };
  </code></pre>
  
  <p><strong>coinlist.component.html</strong></p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      {{ title }}
    &lt;/h1&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;p *ngFor="let coin of _jsonData"&gt;
   Found {{ coin }}
  &lt;/p&gt;
  </code></pre>
  
  <p>Anyone know what is stopping the CoinListings from being displayed via *ngFor? Or how I can show each CoinListing's variables in the HTML page, given their structure?</p>