title: Unable to display http data using MatTableDataSource
body: <p>I'm trying to use retrieve data from a server using http.get. I'm retrieving the data but I'm not able to put it into an angular material table. Here is my code:</p>
  
  <p>tarefas.component.html:</p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8"&gt;
    &lt;div class="example-header"&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  
    &lt;mat-table #table [dataSource]="dataSource"&gt;
  
      &lt;!-- Position Column --&gt;
      &lt;ng-container matColumnDef="userID"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; UserID &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.position}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container matColumnDef="id"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; ID &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Weight Column --&gt;
      &lt;ng-container matColumnDef="title"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Title &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.weight}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Symbol Column --&gt;
      &lt;ng-container matColumnDef="completed"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Completed? &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; {{element.symbol}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
    &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>tarefas.component:</p>
  
  <pre><code>Component({
    selector: 'app-tarefas',
    templateUrl: './tarefas.component.html',
    styleUrls: ['./tarefas.component.css']
  })
  export class TarefasComponent implements OnInit {
    lista: List[];
  
    test: List[];
  
  
  
    constructor(private listService: ListService) { 
    }
  
    displayedColumns = ['userID', 'id', 'title', 'completed'];
    dataSource = new MatTableDataSource();
  
    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
  
      this.dataSource.filter = filterValue;
    }
  
    ngOnInit() {
      this.getLista();
  
    }
  
    getLista(): void {
      this.listService.getLista().subscribe(lista =&gt; this.lista = lista);
    }
  
  
  
  }
  </code></pre>
  
  <p>list.service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { catchError, map, tap } from 'rxjs/Operators';
  
  import { List } from './list';
  
  const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };
  
  @Injectable()
  export class ListService {
  
    constructor(private http: HttpClient) { }
    private listUrl = 'https://jsonplaceholder.typicode.com/todos';
  
    //GET Lista do servidor
    getLista(): Observable&lt;List[]&gt; {
      return this.http.get&lt;List[]&gt;(this.listUrl);
    }
  </code></pre>
  
  <p>list.ts:</p>
  
  <pre><code>export class List {
      userID: number;
      id: number;
      title: String;
      completed: boolean;
  }
  </code></pre>
  
  <p>How can I make this work? I tried a lot of things, but I have no success on displaying the data in the browser.</p>