title: Angular 6, ngFor identifier not defined
body: <p>I'm using Google's youtube API, and while I retrieve the data successfully, I'm unable to display it in a meaningful way. I use a service for the API call and the code is as follows. I'm trying to show a list of specific results I get from the API, such as name, description, and thumbnails.</p>
  
  <p><strong>videos.service.ts</strong></p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {HttpClient} from '@angular/common/http';
  import {Videolist} from '../Models/videolist.model';
  
  @Injectable({
      providedIn: 'root'
  })
  export class VideosService {
      constructor(private http: HttpClient) {
      }
  
      public query: string;
      results = new Array();
  
      getVideos() {
          const finalURL = 'https://www.googleapis.com/youtube/v3/search?key=*myapikey*&amp;part=snippet' +
              ',id&amp;order=date&amp;maxResults=8&amp;q=' + this.query;
          return this.http.get&lt;Videolist&gt;(finalURL);
      }
  }
  </code></pre>
  
  <p><strong>videolist.model.ts</strong></p>
  
  <pre><code>import {Deserialize} from './deserialize.model';
  
  export class Videolist implements Deserialize&lt;Videolist&gt; {
      videoId: string;
      description: string;
      thumbnails: any;
  
      deserialize(input: any): Videolist {
          Object.assign(this, input);
          return this;
      }
  }
  </code></pre>
  
  <p><strong>topbar.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {VideosService} from '../services/videos.service';
  import {ViewEncapsulation} from '@angular/core';
  import {HttpClient} from '@angular/common/http';
  
  @Component({
      selector: 'app-topbar',
      templateUrl: './topbar.component.html',
      styleUrls: ['./topbar.component.css'],
      encapsulation: ViewEncapsulation.None
  })
  export class TopbarComponent {
      id = '2r5IbVJRvH4';
      private player;
      public ytEvent;
      public token: string;
  
      constructor(public data: VideosService) {
      }
  
      searchForm() {
          this.data.getVideos().subscribe(data =&gt; {
              this.data.results = data['items'];
              console.log(this.data.results);
          });
  </code></pre>
  
  <p><strong>topbar.component.html</strong></p>
  
  <pre><code>&lt;div fxLayout="row" fxLayoutAlign="start center" class="margin"&gt;
      &lt;mat-toolbar&gt;
          &lt;form class="example-form"&gt;
              &lt;mat-form-field class="testi"&gt;
                  &lt;input id="haku" matInput placeholder="Search for songs" [(ngModel)]="data.query" name="query"&gt;
  
              &lt;/mat-form-field&gt;
              &lt;button (click)="searchForm()" mat-button style="margin-left: 40px !important;"&gt;&lt;mat-icon matSuffix&gt;search&lt;/mat-icon&gt;&lt;/button&gt;
          &lt;/form&gt;
      &lt;/mat-toolbar&gt;
  &lt;/div&gt;
  &lt;div class="container" fxLayoutAlign="center center"&gt;
      &lt;div fxLayout="row" fxLayoutAlign="center start" class="keskii"&gt;
          &lt;mat-card class="vasen"&gt;
              &lt;mat-list&gt;
                  &lt;mat-list-item *ngFor="let video of data.results"&gt;&lt;/mat-list-item&gt;
                  &lt;h3 matLine&gt; {{ video.description }}&lt;/h3&gt;
              &lt;/mat-list&gt;
  </code></pre>
  
  <p>I'm using <code>[(ngModel)]</code> for two-way data binding on the query, then click a button that uses the function <code>searchForm()</code> from my topbarcomponent.ts, which gets the results I want via the service. But if I try to loop through <code>data.results (*ngFor="let video of data.results")</code>, I get the error that <strong><code>video is undefined</code></strong>.
  Is my model incorrect, am I trying to loop through the results incorrectly? If you didn't notice yet, I'm a total beginner when it comes to this.</p>