要从REST API渲染数据到Angular Material的mat-table中,您可以按照以下步骤进行操作:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export class YourComponent implements OnInit {
dataSource: any[] = []; // 数据数组
constructor(private http: HttpClient) { }
// ...
}
ngOnInit
生命周期钩子函数中,通过HTTP请求从REST API获取数据并将其分配给数据源:ngOnInit() {
this.http.get('your_rest_api_url').subscribe((data: any[]) => {
this.dataSource = data;
});
}
Column 1
{{element.column1}}
Column 2
{{element.column2}}
请确保将displayedColumns
替换为您的实际列名数组。
displayedColumns
数组,以指定要在表格中显示的列:displayedColumns: string[] = ['column1', 'column2'];
HttpClientModule
以使用HTTP服务:import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [HttpClientModule],
// ...
})
export class YourModule { }
这样,您就可以从REST API获取数据并在Angular Material的mat-table中渲染出来了。