在Angular Material数据表格中,要解决分页器的问题,可以按照以下步骤进行操作:
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { DataService } from 'path/to/data.service';
export interface Data {
// 数据模型
}
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
dataSource: MatTableDataSource;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(private dataService: DataService) { }
ngOnInit() {
// 获取数据
this.dataService.getData().subscribe(data => {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
});
}
}
组件来显示分页器。
Column 1
{{data.column1}}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getData(): Observable {
// 发送HTTP请求,获取数据
}
}
这样就可以在Angular Material数据表格中使用分页器了。