title: angular 8 populate drop down from observable
body: <p>I'm new to angular and trying to populate a dropdown from an observable in Angular 8 but getting no joy.
  I can see the webs service is getting data as I write it to the console log but somehow is not getting displayed on the page.</p>
  
  <p>I've searched the net high an wide to no avail.  Any help is appreciated</p>
  
  <p>error I get is:
  ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.</p>
  
  <p><strong>fetchdata.components.ts</strong></p>
  
  <pre><code>import { Component, Inject } from '@angular/core';
  import { FetchdataService } from '../fetchdata.service';
  import { ServiceTypes } from '../models/servicetypes';
  
  @Component({
    selector: 'app-fetch-data',
    templateUrl: './fetchdata.component.html'
  })
  export class FetchDataComponent {
  
    serviceTypes: ServiceTypes[];
    serviceType: ServiceTypes;
    isLoaded = false;
  
   constructor(private _testService: FetchdataService) { }
  
   getServiceTypes(): void {
     this._testService.getServiceTypes().subscribe(data =&gt; {
       if(data) {
         this.serviceTypes = data;
         this.isLoaded = true;
         console.log('List of Service Types', this.serviceTypes);
       }
     } );
   }
  
   ngOnInit() {
     // fetch all the service types
     this.getServiceTypes();
     //this.serviceType = this.serviceTypes;
   }
  }
  </code></pre>
  
  <p><strong>fetchdata.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { ServiceTypes } from './models/servicetypes';
  
  @Injectable({
    providedIn: 'root'
  })
  export class FetchdataService {
  
    public testURL = 'https://api.myjson.com/bins/1dfxy8';
  
    constructor(private _http: HttpClient) { }
  
      getServiceTypes(): Observable&lt;ServiceTypes[]&gt; {
      return this._http.get&lt;ServiceTypes[]&gt;(this.testURL);
      }
    }
  </code></pre>
  
  <p><strong>serviceTypes.ts</strong></p>
  
  <pre><code>export interface ServiceTypes {
      Code:string;
      Description:string;
      VolumetricRatio: string
  }
  </code></pre>
  
  <p><strong>fetchdata.component.html</strong></p>
  
  <pre><code>&lt;p&gt;fetchdata works!&lt;/p&gt;
  
  
  &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
  
  
  
  &lt;select&gt;
  &lt;option *ngFor="let serviceType of serviceTypes" [value]="serviceType.code"&gt;{{serviceTypes.Description}}&lt;/option&gt;
  &lt;/select&gt;
  
  
  &lt;ul&gt;
    &lt;li *ngFor="let serviceType of serviceTypes"&gt;
        {{ serviceType.Code }}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>console log</strong>
  <a href="https://i.stack.imgur.com/zbZU0.jpg" rel="nofollow noreferrer">console log showing data and errors</a></p>