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

您需要像这样将数据传递到数据源：

SELECT Mast_Rel, MAX([1]) AS [1], MAX([2]) AS [2], MAX([3]) AS [3]
FROM
(
    SELECT * 
    FROM @results
) src
PIVOT
(
    MAX(Category) FOR CategoryCount IN ([1], [2], [3])
) piv
GROUP BY Mast_Rel
ORDER BY Mast_Rel;

无法使用MatTableDataSource

2 个答案: