时间戳

首页 > 解决方案 > 无法使用 MatTableDataSource 显示 http 数据

angular - 无法使用 MatTableDataSource 显示 http 数据

问题描述

我正在尝试使用 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);
  }



}

列表服务：

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);
  }

列表.ts：

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

我怎样才能使这项工作？我尝试了很多东西，但在浏览器中显示数据都没有成功。

标签： angulartypescriptangular-material

解决方案

您需要像这样将数据传递给 DataSource：

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

推荐阅读