Mat-sort 在 angular mat-table 中不起作用

Question

我的 mat-table 工作正常，但是当按照官方 api 文档添加 mat-sort 时，它在 ngAfterViewInit 失败并显示以下消息

无法设置未定义的属性'sort' aq LeadsComponent.push../src/app/leads/leads.component.ts.LeadsComponent.ngAfterViewInit

Mat-table 排序演示上已经有一个 SO post 并尝试了它们，但我仍然无法让它工作。

有人可以帮我解决这个问题吗？官方示例使用组件本身定义的 "static" MatTableDataSource，但是我从后端查询。

MatSortModule 已经在 app.module.ts 中导入，mat-sort-header 指令应用于列并且 ngAfterViewInit 已经与官方示例中的完全一样...

 export class LeadsComponent implements OnInit,AfterViewInit  {

  displayedColumns: string[] = ['name', 'leadStatus', 'mobile', 'email', 'actions'];
  dataSource: MatTableDataSource<LeadsChildObject>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public dialog: MatDialog, private dashBoardService: LeadsService,
    private toast: ToastrService) {
  }

    ngAfterViewInit() {
        this.dataSource.sort = this.sort;
      }

      ngOnInit() {
        this.dashboardService.getFeedback.subscribe(
          res => {
            this.leadlist= res;
            this.dataSource = new MatTableDataSource(this.leadlist);
          }
        );
      }
    }
}

Answer 1

Cannot set property 'sort' of undefined aq LeadsComponent.push../src/app/leads/leads.component.ts.LeadsComponent.ngAfterViewInit

此错误是指在未定义的属性上调用 "sort"，更新后，它是数据源属性，因为您没有对其进行初始化。

它没有被初始化，因为你的subscribe()（你初始化它的地方）是async，因此，初始化发生在之后[=28] =] ngAfterViewInit() 发生了。

请在您的 ngOnInit() 中初始化它：

ngOnInit() { // This line of code below: this.dataSource = new MatTableDataSource<LeadsChildObject>(); this.dashboardService.getFeedback.subscribe( res => { this.leadlist= res; this.dataSource = new MatTableDataSource(this.leadlist); this.dataSource.sort = this.sort; } ); }

您的方法存在问题，您误将 MatTableDataSource 与普通数组方法（简单 Table 方法）一起使用。请找到这个 documentation 来实施 MatTableDataSource 方法

Answer 2

你可以这样试试吗:

  ngOnInit() {
    this.dashboardService.getFeedback.subscribe(
      res => {
        this.leadlist= res;
        this.dataSource = new MatTableDataSource(this.leadlist);
        this.dataSource.sort = this.sort;  //new line, also remove same from viewinit
      }
    );
  }

Mat-sort 在 angular mat-table 中不起作用

Mat-sort is not working in angular mat-table

angular

angular-material

angular-material-table