Question

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

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

在Mat-table Sorting Demo上已经有一个SO帖子，并对其进行了尝试，但我仍然无法使其正常工作。

有人可以帮我解决这个问题吗？官方示例使用组件本身中定义的“静态” 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

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

此错误是指在未定义的属性上调用“排序”，该属性在更新后就是数据源属性，因为您没有对其进行初始化。

它未初始化，因为您的subscribe()（初始化位置）是异步，因此，初始化发生在之后 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与纯数组方法（简单表方法）一起使用。请找到此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无法在有角度的mat-table中使用

2 个答案: