title: How to use interface and observable in angular module to display results using *ngFor from the result from HTTP GET request?
body: <p>I'm trying to use interface as data type in angular app, but I keep getting error. I understand what the error means, but I don't know how to fix it.</p>
  <pre><code>Error: Cannot find a differ supporting object '[{&quot;id&quot;:1,&quot;type&quot;:&quot;Diagnostic&quot;},{&quot;id&quot;:2,&quot;type&quot;:&quot;Impact&quot;}]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;mat-form-field appearance=&quot;standard&quot;&gt;
  &lt;mat-label&gt;Select a report type&lt;/mat-label&gt;
  &lt;mat-select placeholder =&quot;Report Type&quot; formControlName=&quot;reportType&quot; required&gt;
    &lt;mat-option *ngFor=&quot;let report of reportTypes&quot;  [value]=report&gt;
      {{ report.type }}
    &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>
  
  <p><strong>Interface</strong></p>
  <pre><code>export interface IReportTypes{
    id: number;
    type: string;
  }
  </code></pre>
  <p><strong>Component</strong></p>
  <pre><code>export class HomeComponent implements OnInit {
  
    reportForm: any;
  
    reportTypes: Array&lt;IReportTypes&gt;;
  
    reportType: string;
    teamCode: string;
    orgName: string;
  
    constructor(private formBuilder: FormBuilder,
      private _el: ElementRef,
      private reportTypesService: ReportTypesService,
      private _bottomSheet: MatBottomSheet) {
    }
  
    ngOnInit(): void {
  
      this.createForm();
  
      this.getReportTypes();
  
    }
  
  
    getReportTypes() {
  
      this.reportTypesService.getReportTypes().subscribe(
        reportTypes =&gt; {
        this.reportTypes = reportTypes; console.log(typeof(reportTypes)), //&lt;--- string
          error =&gt; console.log(error)});
      
    }
  
  }
  </code></pre>
  <p><strong>Service</strong></p>
  <pre><code> export class ReportTypesService {
  
    constructor(private http: HttpClient,
      private router: Router) { }
  
  
   
    // get report types available. This is returned from REST API provided by R
    getReportTypes(): Observable&lt;IReportTypes[]&gt; {
  
      return this.http.get&lt;IReportTypes[]&gt;('/api/v1/reportTypes');
     
  
    }
  
  }
  </code></pre>
  <p><strong>UPDATE</strong></p>
  <p>I tried several different variations (too many to count and mention), but none of those work in declaring array. So, I wanted to see what is the value that the service is returning. So, I printed out the following in the component after</p>
  <p><code>this.reportTypes = reportTypes; console.log(typeof(reportTypes))</code>. The result was <code>[</code>. So, it seems like to that the service is literally sending the results as <code>string</code>.</p>