Angular Material Datatable не сортирует данные из запроса Http

Question

Я использую Angular Material datatable с запросом 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