使用 HTTP GET 请求获取 Angular Material Table 中的数据 [英] Using HTTP GET request to fetch data in an Angular Material Table
问题描述
我有一个 Angular Material 表,我想在其中从服务中获取数据.这是我的服务.
import { Injectable } from "@angular/core";从@angular/common/http"导入 { HttpClient };从'../messages/message-table/message.model'导入{消息};@Injectable()导出类 MessageService {构造函数(私有 http:HttpClient){}getMessageTableData() {return this.http.get('');}}
这是数据的接口Message
export interface Message {请求ID:字符串;请求状态:字符串;请求者名称:字符串;提交日期:字符串;审批人名称:字符串;批准日期:字符串;主题:字符串;消息状态:字符串;读取状态:字符串;}
在我的 component.ts 文件中,我可以使用这个在控制台中显示数据,
ngOnInit() {this.messageService.getMessageTableData().subscribe((响应) =>控制台日志(响应))}
我已经在 Angular 材料的网站上看到了示例代码,但由于我的表上有很多客户端过滤,我想使用 MatTableDataSource 作为我的数据源.该示例使用自定义数据源,我无法在其中包含我的过滤器.如何在我的表中显示来自我的服务的 JSON 格式的数据?
同时附上我的表格的 HTML 代码
<ng-container matColumnDef="RequestID"><th mat-header-cell *matHeaderCellDef mat-sort-header>请求 ID </th><td mat-cell *matCellDef="let element">{{element.RequestID}} </td></ng-容器><ng-container matColumnDef="RequestStatus"><th mat-header-cell *matHeaderCellDef mat-sort-header>请求状态<td mat-cell *matCellDef="let element">{{element.RequestStatus}} </td></ng-容器><ng-container matColumnDef="RequestorName"><th mat-header-cell *matHeaderCellDef mat-sort-header>请求者名称</th><td mat-cell *matCellDef="let element">{{element.RequestorName}} </td></ng-容器><ng-container matColumnDef="SubmissionDate"><th mat-header-cell *matHeaderCellDef mat-sort-header>提交日期</th><td mat-cell *matCellDef="let element">{{element.SubmissionDate}} </td></ng-容器><ng-container matColumnDef="ApproverName"><th mat-header-cell *matHeaderCellDef mat-sort-header>批准人名称</th><td mat-cell *matCellDef="let element">{{element.ApproverName}} </td></ng-容器><ng-container matColumnDef="ApprovalDate"><th mat-header-cell *matHeaderCellDef mat-sort-header>批准日期 </th><td mat-cell *matCellDef="let element">{{element.ApprovalDate}} </td></ng-容器><ng-container matColumnDef="主题"><th mat-header-cell *matHeaderCellDef mat-sort-header>主题</th><td mat-cell *matCellDef="let element">{{element.Subject}} </td></ng-容器><ng-container matColumnDef="MessageStatus"><th mat-header-cell *matHeaderCellDef mat-sort-header>消息状态</th><td mat-cell *matCellDef="let element">{{element.MessageStatus}} </td></ng-容器><ng-container matColumnDef="ReadStatus"><th mat-header-cell *matHeaderCellDef mat-sort-header>读取状态 </th><td mat-cell *matCellDef="let element">{{element.ReadStatus}} </td></ng-容器>
您需要创建 MatTableDataSource
的实例并将您从服务中获取的数据传递给它.像这样:
import { MatSort, MatTableDataSource } from '@angular/material';...@成分({...})导出类 TableComponent 实现 OnInit {...数据源;@ViewChild(MatSort) 排序:MatSort;ngOnInit() {this.messageService.getMessageTableData().订阅(响应=> {this.dataSource = new MatTableDataSource(response);this.dataSource.sort = this.sort;});}...}
<小时><块引用>
这是一个 工作示例 StackBlitz 供您参考.
I have an Angular Material table in which I want to fetch data from a service. This is my service.
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>');
}
}
This is the interface Message for the data
export interface Message {
RequestID: string;
RequestStatus: string;
RequestorName: string;
SubmissionDate: string;
ApproverName: string;
ApprovalDate: string;
Subject: string;
MessageStatus: string;
ReadStatus: string;
}
In my component.ts file, I'm able to display the data in console using this,
ngOnInit() {
this.messageService.getMessageTableData().subscribe(
(response) => console.log(response)
)
}
I've seen the example code on Angular material's website but since I have a lot of client side filtering on my table, I want to use MatTableDataSource for my dataSource. That example uses a custom dataSource and I'm not able to include my filters in that. How can I display this data, which is coming in JSON form from my service, in my table?
Attaching the HTML code for my table as well
<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>
You'll need to create an instance of the MatTableDataSource
and pass it the data that you're getting from your service. Something like this:
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;
});
}
...
}
Here's a Working Sample StackBlitz for your ref.
这篇关于使用 HTTP GET 请求获取 Angular Material Table 中的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!