在使用Angular Material的表格时,如果要使用异步数据源,可以按照以下步骤操作:
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = ['id', 'name', 'email'];
dataSource: MatTableDataSource;
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.http.get('https://api.example.com/users').subscribe(data => {
this.dataSource = new MatTableDataSource(data);
});
}
和
标签来渲染表格:
ID
{{user.id}}
Name
{{user.name}}
Email
{{user.email}}
通过上述步骤,您就可以使用异步数据源在Angular Material的表格中显示数据了。