Question

我正在将Angular Material数据表与Http请求一起使用以获取数据。

但是，它没有对数据表中的数据进行排序。

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

检查所显示的列名是否与用作列标题的列名相同。其他的一切看起来还可以。如果可能，发布您的模板文件。

在检查您的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);
      }
    )
  }

Answer 2

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

Angular Material Datatable不对Http请求中的数据进行排序

2 个答案: