要解决Angular Material表格不显示任何数据的问题,您可以按照以下步骤操作:
MatTableModule
和MatPaginatorModule
模块。import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
imports: [
MatTableModule,
MatPaginatorModule
],
...
})
export class YourModule { }
import { Component } from '@angular/core';
export interface UserData {
name: string;
age: number;
city: string;
}
@Component({
selector: 'your-component',
template: `
Name
{{user.name}}
Age
{{user.age}}
City
{{user.city}}
`,
})
export class YourComponent {
displayedColumns: string[] = ['name', 'age', 'city'];
dataSource: UserData[] = [
{name: 'John', age: 30, city: 'New York'},
{name: 'Jane', age: 25, city: 'London'},
{name: 'Bob', age: 40, city: 'Paris'}
];
}
mat-paginator
组件来添加分页功能(可选)。确保您在模板中正确使用mat-paginator
组件。
mat-paginator
组件)。import { AfterViewInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
export class YourComponent implements AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
通过执行以上步骤,您应该能够解决Angular Material表格不显示任何数据的问题,并正确显示数据。