MatSort 未定义 - Angular 5答案

【问题标题】：MatSort is undefined - Angular 5MatSort 未定义 - Angular 5
【发布时间】：2018-11-16 05:37:54
【问题描述】：

我正在尝试在我的 Angular 应用程序中实现一个 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>

有谁知道我做错了什么？

【问题讨论】：

而不是声明 this.dataSource.sort = this.sort;在 ngAfterViewInit() 中尝试在 ngOnInit() 中调用它
我做了，它保持未定义，我尝试了 ngOnInit、ngAfterViewInit 和一个外部函数。他们都没有工作
你能创建一个stackblitz吗
您找到解决方案了吗？在这里面临同样的问题。谢谢。

标签： angular angular-material angular5

【解决方案1】：

对于我来说，我使用了两个 MatTable，而对于第二个，我正在进行分页和排序。错误地，我也为第一个表写了 matSort。因此，在组件文件中，它正在搜索第一个表的排序和分页器，而我正在为第二个表定义它。

【讨论】：

【解决方案2】：

问题是因为*ngIf="ready"。如果我们从父组件将其设置为ready，则将datasource.sort 放在ngOnChanges 上，因为这是第一个被调用的生命周期钩子：

ngOnChanges(){ this.datasource.sort = sort; this.datasource.paginator = paginator; }

或者，如果您要更改同一组件中的ready，请在准备好false 之前放置datasource.sort：

ngOnInit(){ this.datasource.sort = sort; this.datasource.paginator = paginator; this.ready=false; }

最后，用一些默认值初始化您的datasource，这样this.datasource 就不会为空或未定义。

datasource=new MatTableDataSource([]);

【讨论】：

【解决方案3】：

问题可以在 apps.module.ts 中添加解决：

import { MatPaginatorModule,MatSortModule } from '@angular/material';

和：

imports: [
    ....
    MatPaginatorModule,        
    MatSortModule

希望这会有所帮助。

【讨论】：

【解决方案4】：

使用 Angular 8 和 Material 6.4.1，如果您等待从服务接收数据，最简单和最好的修复方法只需设置 static: false 而不是 true，如下所示：

@ViewChild(MatSort, { static: false }) 排序：MatSort;

在我的例子中是一个 ngOnChanges 数据调用。

仅供参考：MatPaginator 也是如此。

【讨论】：

【解决方案5】：

我的解决方案是：mat-sort-header="FIELDNAME"，因为我的列包含“转换”数据。

【讨论】：

【解决方案6】：

我遇到了同样的问题，我找到了答案on a Angular's issue。

在我的特定情况下（以及那个人在 github 上的情况），解决了删除 mat-table 标签上的 *ngIf 的问题。我不确定，但也许 <mat-form-field *ngIf="ready" class="width-80"> 会造成一些麻烦。

【讨论】：