要解决“Angular Material 表格的 dataSource 没有被渲染”的问题,你可以尝试以下解决方法:
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
dataSource: MatTableDataSource;
displayedColumns: string[] = ['column1', 'column2', 'column3'];
constructor() {
// 假设从 API 获取到的数据是一个数组
const data = [
{ column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
// 更多数据...
];
this.dataSource = new MatTableDataSource(data);
}
}
Column 1
{{ element.column1 }}
Column 2
{{ element.column2 }}
Column 3
{{ element.column3 }}
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements AfterViewInit {
dataSource: MatTableDataSource;
displayedColumns: string[] = ['column1', 'column2', 'column3'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor() {
// 假设从 API 获取到的数据是一个数组
const data = [
{ column1: 'Value 1', column2: 'Value 2', column3: 'Value 3' },
// 更多数据...
];
this.dataSource = new MatTableDataSource(data);
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
}
通过上述步骤,你应该能够正确渲染 Angular Material 表格的 dataSource 数据。