在Angular 6中,如果材料表格的索引不起作用,可以尝试以下解决方法:
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
imports: [
MatTableModule,
MatPaginatorModule
],
...
})
export class AppModule { }
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
export interface Data {
// 定义表格列的数据类型
column1: string;
column2: number;
...
}
@Component({
selector: 'app-my-table',
templateUrl: './my-table.component.html',
styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements OnInit {
dataSource: MatTableDataSource;
displayedColumns: string[] = ['column1', 'column2', ...];
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
ngOnInit() {
// 将数据传递给MatTableDataSource对象
this.dataSource = new MatTableDataSource(yourDataArray);
// 设置分页器
this.dataSource.paginator = this.paginator;
}
}
Column 1
{{element.column1}}
Column 2
{{element.column2}}
...
通过以上步骤,您应该能够在Angular 6中正确使用材料表格和分页器,并且索引应该能够正常工作。如果问题仍然存在,请检查控制台是否有任何错误消息,并确保所使用的数据类型和数组的正确性。