MatSort未定义 - Angular 5

14 浏览
0 Comments

MatSort未定义 - Angular 5

我试图在我的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
  }
 ...
}

这是我的component HTML：


   


   
       {{fake_label.name}}
       {{fake.name}}

有人知道我做错了什么吗？

0

3 答案

0 Comments

在Angular 8和Material 6.4.1中，如果你在等待从服务中接收数据，修复这个问题的最简单和最好的方法就是将static: false设置为false，像这样：

(MatSort, { **static: false** }) sort: MatSort;

在我的案例中，是在ngOnChanges中调用数据。

同样适用于MatPaginator。

0
0 Comments

问题：MatSort is undefined - Angular 5

出现原因：在Angular 5中，如果没有正确导入和使用MatSort模块，就会出现MatSort未定义的错误。

解决方法：在apps.module.ts中添加以下导入语句：

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

然后在imports数组中添加以下模块：

imports: [
    ....
    MatPaginatorModule,
    MatSortModule
]

希望这可以帮助解决问题。

0
0 Comments

在使用Angular 5和Material 5时，出现了(MatSort未定义)的问题。我在Angular的问题中找到了答案。

在我的特定情况下（以及在github上的那个人的情况下），通过移除mat-table标签上的*ngIf解决了问题。我不确定，但可能是<mat-form-field *ngIf="ready" class="width-80">引起了一些问题。

使用Angular 14和Material 14，这个问题仍然存在。移除*ngIf后，排序功能又正常工作了。

0