使用 HTTP GET 请求在 Angular 材质表中获取数据答案

【问题标题】：Using HTTP GET request to fetch data in an Angular Material Table使用 HTTP GET 请求在 Angular 材质表中获取数据
【发布时间】：2018-12-12 18:08:11
【问题描述】：

我有一个 Angular Material 表，我想在其中从服务中获取数据。这是我的服务。

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Message } from '../messages/message-table/message.model';

@Injectable()

export class MessageService {
  constructor(private http: HttpClient) {}

  getMessageTableData() {
    return this.http.get<Message[]>('<removed>');
  }
}

这是数据的接口消息

export interface Message {
    RequestID: string;
    RequestStatus: string;
    RequestorName: string;
    SubmissionDate: string;
    ApproverName: string;
    ApprovalDate: string;
    Subject: string;
    MessageStatus: string;
    ReadStatus: string;
  }

在我的 component.ts 文件中，我可以使用它在控制台中显示数据，

ngOnInit() {

    this.messageService.getMessageTableData().subscribe(
      (response) => console.log(response)
    )
}

我在 Angular 材料的网站上看到了示例代码，但由于我的表上有很多客户端过滤，我想使用 MatTableDataSource 作为我的数据源。该示例使用自定义数据源，我无法在其中包含我的过滤器。如何在我的表中显示这些来自我的服务的 JSON 形式的数据？

附上我的表格的 HTML 代码

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="RequestID">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Request ID </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestID}} </td>
    </ng-container>

    <ng-container matColumnDef="RequestStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Request Status </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestStatus}} </td>
    </ng-container>

    <ng-container matColumnDef="RequestorName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Requestor Name </th>
        <td mat-cell *matCellDef="let element"> {{element.RequestorName}} </td>
    </ng-container>

    <ng-container matColumnDef="SubmissionDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Submission Date </th>
        <td mat-cell *matCellDef="let element"> {{element.SubmissionDate}} </td>
    </ng-container>

    <ng-container matColumnDef="ApproverName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Approver Name </th>
        <td mat-cell *matCellDef="let element"> {{element.ApproverName}} </td>
    </ng-container>

    <ng-container matColumnDef="ApprovalDate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Approval Date </th>
        <td mat-cell *matCellDef="let element"> {{element.ApprovalDate}} </td>
    </ng-container>

    <ng-container matColumnDef="Subject">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Subject </th>
        <td mat-cell *matCellDef="let element"> {{element.Subject}} </td>
    </ng-container>

    <ng-container matColumnDef="MessageStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Message Status </th>
        <td mat-cell *matCellDef="let element"> {{element.MessageStatus}} </td>
    </ng-container>

    <ng-container matColumnDef="ReadStatus">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Read Status </th>
        <td mat-cell *matCellDef="let element"> {{element.ReadStatus}} </td>
    </ng-container>
</table>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您需要创建MatTableDataSource 的实例并将您从服务中获取的数据传递给它。像这样的：

import { MatSort, MatTableDataSource } from '@angular/material';
...

@Component({...})
export class TableComponent implements OnInit {
  ...
  dataSource;

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.messageService.getMessageTableData()
      .subscribe(response => {
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.sort = this.sort;
      });
  }

  ...

}

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

它仍然没有显示任何数据，我可以看到表格正在渲染，因为生成了很多行，但我的页面完全是空的，因为行中没有任何数据

【解决方案2】：

你可以过滤这个数据源或者我错过了什么

dataSource: any;
ngOnInit() {
   this.messageService.getMessageTableData().subscribe(
     (response) => this.dataSource = response
     )
}

【讨论】：

【解决方案3】：

您可以使用MatTableDataSource 来帮助过滤和排序。

dataSource: new MatTableDataSource([]);
ngOnInit() {
   this.messageService.getMessageTableData().subscribe( (data) => {
       this.dataSource.data = data || []
   })
}

applyFilter(filterValue: string) {
   this.dataSource.filter = filterValue.trim().toLowerCase();
}

添加stackblitz 示例代码供参考。

【讨论】：