Javascript 为什么杂志分页和杂志排序不起作用

嗨，我正在尝试在从nodejs检索数据之后在前端实现分页和排序。 以下是我的链接：

我想我使用了同样的逻辑，但我不知道为什么它不起作用： 以下是ts文件：

import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import { merge, Observable, of as observableOf } from 'rxjs';
import { catchError, map, startWith, switchMap, tap } from 'rxjs/operators';

import { TicketService } from '../../services/ticket.service';

import { Ticket } from '../../models/ticket';
import { TicketDetail } from '../../models/ticket-detail';
import { TicketDetailComponent } from '../ticket-detail/ticket.detail.component';
import { query } from '@angular/animations';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit, AfterViewInit{

  ticketList: Ticket[] = [];
  dataSource: MatTableDataSource<Ticket>;
  originalTicketList: Ticket[] = [];
  displayedColumns = ['id', 'findingSourceSystem', 'label', 'caseStatus', 'caseCreateTimestamp'];
  displayedDetailColumns = ['id', 'label', 'findingSourceSystem', 'caseCreateTimestamp'];
  filterAllForm: FormGroup;
  allTickets: boolean = true;
  labelList: string[];
  homeLabelList: string[];
  currentTicketId: string;
  searchBy: string = '';
  resultsLength = 0;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(private ticket: TicketService,
    private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.filterAllForm = this.formBuilder.group({
      startDate: [''],
      endDate: ['']
    });
    this.getAllLabels();
    this.getAllTicket();
    this.getAllUniqueLabels();
  }

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

  get filterFormControls() { return this.filterAllForm.controls; }

  getAllTicket() {
    this.allTickets = true;
    let queryParams = '';
    console.log(this.currentTicketId) + " " + this.searchBy;
    if (this.searchBy === 'id') {
      queryParams = 'id=' + this.currentTicketId;
    } else if (this.searchBy === 'anchorPoint') {
      queryParams = "anchor=" + this.currentTicketId;
    }
    this.ticket.getAllTicket(queryParams).then((res: Ticket[]) => {
      this.ticketList = res;
      this.originalTicketList = this.ticketList;
      this.dataSource = new MatTableDataSource(this.ticketList)
    });
  }

  filterAllTicket() {
    let startFlag = this.filterAllForm.value.startDate != undefined && this.filterAllForm.value.startDate != "";
    let endFlag = this.filterAllForm.value.endDate != undefined && this.filterAllForm.value.endDate != "";
    if (startFlag || endFlag) {
      let arrays = [];
      for (let ticket of this.originalTicketList) {
        let ticketStartDate = new Date(ticket.caseCreateTimestamp);
        let flag = startFlag && ticketStartDate >= this.filterAllForm.value.startDate;
        if (endFlag) {
          flag = flag && ticketStartDate <= this.filterAllForm.value.endDate;
        }
        if (flag) {
          arrays.push(ticket);
        }
      }
      this.ticketList = arrays;
      this.dataSource = new MatTableDataSource(this.ticketList)
    }
  }

  getAllLabels() {
    this.ticket.getLabel().then((res: string[]) => {
      this.labelList = res;
      this.labelList.push("all");
      this.labelList.sort();
    });
  }

  getAllUniqueLabels() {
    this.ticket.getLabel().then((res: string[]) => {
      this.homeLabelList = res;
      this.homeLabelList.sort();
    });
  }

  searchTicket() {
    this.getAllTicket();
  }

}

我的逻辑是：在ngOnInit（）中获取所有数据，然后在ngAfterViewInit（）中进行排序和分页。但它不起作用。 这是当前的网页：我可以看到用于排序的箭头，但单击“什么也没发生”，页面按钮也会显示，但不起作用。 有人能帮我吗？还是给个暗示？

---

您不能在getAllTicket方法中执行此操作。这将删除刚刚在数据源上设置的分页器和排序

this.dataSource = new MatTableDataSource(this.ticketList)

相反，请在开始时按如下方式重新设置对象：

dataSource = new MatTableDataSource<Ticket>();

此外，当您发现matSort静态属性应该为false时：

@ViewChild(MatSort, { static: false })

---

有人能帮忙吗？我们把数据放进数据源有什么不对吗？非常感谢！分页有效，排序无效。但在你的帮助下我取得了进步！你所有的排序都坏了，还是只是一些列坏了？都坏了，行得通。我需要更改

@ViewChild（MatSort，{static:true}）sort:MatSort

到

@ViewChild（MatSort，{static:false}）排序：MatSort。是否要编辑您的答案，以便我选择正确答案？
dataSource = new MatTableDataSource<Ticket>();

this.dataSource.data = this.ticketList;

@ViewChild(MatSort, { static: false })