Angular 单击“排序”按钮后，将加载角度材质表数据

您好，我在我的项目中使用了角度材质，我正在尝试创建一个带有排序和分页的表。这是我的相关表的组件代码。。在过滤器中写入内容或单击分页后，将显示表数据 如何解决这个问题？ 谢谢

---

在ngOnInit中初始化MatTableDataSource

public tableData = [];

  displayedColumns = ['id', 'username', 'first_name', 'last_name', 'email', 'is_staff', 'is_superuser', 'is_active', 'groups'];
  dataSource  : MatTableDataSource<any>; //<== Declaration only

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    this._user.getUsersInfo().subscribe(data => {
      this.users = data;

      for (let user of this.users) {
        this.tableData.push(
          {
            id: user.id,
            username: user.username,
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            is_staff: user.is_staff,
            is_superuser: user.is_superuser,
            is_active: user.is_active,
            groups: user.groups[0]
          }
        );
      }
      this.dataSource = new MatTableDataSource(this.tableData); <== assignment
    });


  }

public tableData = [];

  displayedColumns = ['id', 'username', 'first_name', 'last_name', 'email', 'is_staff', 'is_superuser', 'is_active', 'groups'];
  dataSource  : MatTableDataSource<any>; //<== Declaration only

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    this._user.getUsersInfo().subscribe(data => {
      this.users = data;

      for (let user of this.users) {
        this.tableData.push(
          {
            id: user.id,
            username: user.username,
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            is_staff: user.is_staff,
            is_superuser: user.is_superuser,
            is_active: user.is_active,
            groups: user.groups[0]
          }
        );
      }
      this.dataSource = new MatTableDataSource(this.tableData); <== assignment
    });


  }

 constructor(private _user: UserService, private ref: ChangeDetectorRef) {
 }

 //And after modifying table's data:
 //this.ref.detectChanges();