Angular Material 数据表未对来自 Http 请求的数据进行排序

Question

我正在使用 Angular Material 数据table 和 Http 请求来获取数据。

但是，它不是对数据table中的数据进行排序。

export class ContactComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = [
    "firstname",
    "middlename",
    "lastname",
    "status",
    "dateofbirth"
  ];     
  selected;
  dataSource = new MatTableDataSource<Yuvak>();

  constructor(
    private router: Router,
    private dialogService: NbDialogService,
    private contactService: ContactService
  ) { }

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.contactService.getAllUser().subscribe(
      data => {
        this.dataSource.data = data.data.user;
      },
      error => {
        console.log("There was an error while retrieving Users !!!" + error);
      }
    )
  }

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

以上是我的ts文件。以前当我从本地 json 文件加载数据时，它在构造函数中运行良好。但是，现在我正在从 GET 请求中获取数据。

Answer 1

尝试将 dataSource = new MatTableDataSource<Yuvak>(); 替换为 dataSource: Yuvak[] = []，将 this.dataSource.data = data.data.user; 替换为 this.dataSource = data

Answer 2

检查您显示的列名是否包含您用作列标题的列名。其他一切看起来都不错。如果可能 post 您的模板文件。

检查您的 html 文件后试试这个。

ngOnInit() {
    this.contactService.getAllUser().subscribe(
      data => {
        this.dataSource.data = data.data.user;
this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
      },
      error => {
        console.log("There was an error while retrieving Users !!!" + error);
      }
    )
  }

Angular Material 数据表未对来自 Http 请求的数据进行排序

Angular Material Datatable not sorting data from Http request

angular-material2

angular

angular-material-6