MatSort 未定义 - Angular 5 [英] MatSort is undefined - Angular 5
本文介绍了MatSort 未定义 - Angular 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在我的 Angular 应用程序中实现一个 Material 表.分页和过滤器工作正常,但我无法对我的表格进行排序.我对 MatSort 的引用未定义.
I'm trying to implement a Material table in my angular application. Pagination and Filter are working fine, but i'm not able to sort my table. My reference to MatSort is undefined.
我确实在 AppModule 中导入了它:
I did import it in 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:
Here is my 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:
And here is my component 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>
有人知道我做错了什么吗?
Does anyone know what I'm doing wrong?
推荐答案
问题可以在apps.module.ts中解决:
Issue can be fixed adding in apps.module.ts:
import { MatPaginatorModule,MatSortModule } from '@angular/material';
和:
imports: [
....
MatPaginatorModule,
MatSortModule
希望这会有所帮助.
这篇关于MatSort 未定义 - Angular 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文