我正在尝试在我的角度应用程序中实现Material表 . 分页和过滤器工作正常，但我无法排序我的表 . 我对MatSort的引用是未定义的 .
我在AppModule中导入了它：
import {MatTableModule} from '@angular/material/table';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatButtonModule, MatCheckboxModule,MatPaginatorModule,MatInputModule} from '@angular/material';
import {MatSortModule} from '@angular/material/sort';
...
@NgModule({
declarations: [...],
imports: [
MatSortModule,
MatTableModule,
MatPaginatorModule,
MatInputModule,
...
]
})
这是我的component.ts：
import { Component, OnInit , ViewChild, AfterViewInit} from '@angular/core';
...
import {MatTableDataSource,MatSort,MatPaginator} from '@angular/material';
...
export class MyClass inplements OnInit, AfterViewInit{
@ViewChild(MatSort) sort:MatSort;
@ViewChild(MatPaginator) paginator:MatPaginator;
...
ngAfterViewInit(){
this.dataSource = new MatTableDataSource(this.fake_data);
this.dataSource.paginator = this.paginator
this.dataSource.sort = this.sort
}
...
}
这是我的组件HTML：
<mat-form-field *ngIf="ready" class="width-80">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table class = "mat-elevation-z8 animate" matSort [dataSource]="dataSource" display:flex>
<ng-container matColumnDef="fake_name">
<mat-header-cell *matHeaderCellDef mat-sort-header class="columnTitle"><b>{{fake_label.name}}</b></mat-header-cell>
<mat-cell *matCellDef="let fake;" class="cellContent">{{fake.name}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="fakeColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: fakeColumns" class="animate"></mat-row>
</mat-table>
<mat-paginator [length]="length" [pageSize]="5" [pageSizeOptions]="[5,10,15,20,25,50,100]" showFirstLastButtons></mat-paginator>
有谁知道我做错了什么？
1 回答
可以修复问题，在apps.module.ts中添加：
和：
希望这可以帮助 .