Невозможно отобразить данные http с помощью MatTableDataSource

Question

Я пытаюсь использовать получение данных с сервера, используя http.get.Я получаю данные, но не могу поместить их в таблицу угловых материалов.Вот мой код:

tarefas.component.html:

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="userID">
      <mat-header-cell *matHeaderCellDef> UserID </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="completed">
      <mat-header-cell *matHeaderCellDef> Completed? </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

tarefas.component:

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 => this.lista = lista);
  }



}

list.service:

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<List[]> {
    return this.http.get<List[]>(this.listUrl);
  }

list.ts:

export class List {
    userID: number;
    id: number;
    title: String;
    completed: boolean;
}

Как я могу сделать эту работу?Я много чего перепробовал, но не смог отобразить данные в браузере.

Answer 1

Вы можете напрямую подписать источник данных на список наблюдаемых

getLista(): void {
    this.listService.getLista().subscribe(lista => this.datasource.data = lista);
  }

Answer 2

Вам необходимо передать данные в источник данных следующим образом:

dataSource = new MatTableDataSource(this.getLista());