title: Unable to read data from a service in HTML table
body: <p>I am using a service to get data in JSON format for my table in an Angular 7 project. This is the definition of the service.</p>
  
  <pre><code> getLandingDashboardSnapshotDetails() {
      return this.http.get&lt;Snapshot[]&gt;('&lt;removed&gt;');
    }
  </code></pre>
  
  <p>This is the snapshot model used in the service</p>
  
  <pre><code>export interface Snapshot {
     RequestsPendingApproval: string,
     TotalApprovedRequests: string,
     TotalDrafts: string,
     TotalRejectedRequests: string 
  }
  </code></pre>
  
  <p>In my .ts file, this is what I've defined.</p>
  
  <pre><code>LandingDashboardSnapshotData: Snapshot[];
  
  ngOnInit() {
      this.messageService.getLandingDashboardSnapshotDetails().subscribe(
        response =&gt; {
          this.LandingDashboardSnapshotData = response;
          console.log(this.LandingDashboardSnapshotData)
        },
        errorResponse =&gt; { console.log(errorResponse) }
      );
  </code></pre>
  
  <p>This is how I'm trying to display the data in my table.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;table class='reports'&gt;
          &lt;tr *ngFor = "let d of LandingDashboardSnapshotData"&gt;
              &lt;th class="reports-data"&gt;Pending for Approval : {{ d.RequestsPendingApproval }} &lt;/th&gt;
              &lt;th class="reports-data"&gt;Total Sent : 11&lt;/th&gt;
              &lt;th class="reports-data"&gt;Total Drafts : 4&lt;/th&gt;
              &lt;th class="reports-data"&gt; Total Rejected : 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm able to see the data from the service using console.log(). However, when I try to run this, I get an error saying : Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. I don't understand why I'm getting the error. How else can I display the data?</p>