以下是使用Angular 7对Mat-Table进行排序的示例代码:
DataService
的服务来获取数据:import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
getData() {
// 返回一个Observable,用于模拟异步获取数据
return of([
{ name: 'John', age: 30 },
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 40 }
]).pipe(delay(1000)); // 添加延迟以模拟异步请求
}
}
MatTableDataSource
和MatSort
来排序表格数据:import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { DataService } from './data.service';
@Component({
selector: 'app-my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements OnInit {
dataSource: MatTableDataSource;
displayedColumns: string[] = ['name', 'age'];
@ViewChild(MatSort, {static: true}) sort: MatSort;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.sort = this.sort;
});
}
}
MatTable
和MatSortHeader
来呈现和处理排序:
Name
{{element.name}}
Age
{{element.age}}
通过这些代码,你可以在Angular 7中使用来自服务的数据对Mat-Table进行排序。