javascript - 为什么 Mag Pagination 和 Mag Sort 不起作用

Question

您好，我正在尝试在从 nodejs 检索数据后在前端实现分页和排序。我点击此链接: https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.ts

我想我使用的是相同的逻辑，但我不知道为什么它不起作用:这是 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();
  }

}

和html文件:

<div id="main-body">
  <div class="search-bar">
    <div class="input-group mb-3">
      <select [(ngModel)]="searchBy" class="border-primary">
          <option value="">-- choose an option--</option>
          <option value="id">SIR ID</option>
          <!-- <option value="anchorPoint">Anchor Point</option> -->
          <option *ngFor="let label of homeLabelList"  value="anchorPoint">{{label | uppercase}}</option>
      </select>
      <input type="text" class="form-control card border-primary ele fnt" placeholder="Enter the SIR ID or Host or sha256 or User ID"
        aria-label="Ticket Id" aria-describedby="button-addon2" [(ngModel)]="currentTicketId">
      <div class="input-group-append">
        <button class="btn btn-primary ele" type="button" id="button-addon2" (click)="searchTicket()">Lets
          Search!</button>
      </div>
    </div>
    <div class="dates filter-tab">
        <form [formGroup]="filterAllForm" (ngSubmit)="filterAllTicket()" class="table-list">
          <mat-form-field class="filter-box">
            <input matInput [matDatepicker]="startDate" placeholder="Choose a start date" formControlName="startDate" />
            <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
            <mat-datepicker #startDate></mat-datepicker>
          </mat-form-field>

          <mat-form-field class="filter-box">
            <input matInput [matDatepicker]="endDate" placeholder="Choose a end date" formControlName="endDate" />
            <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
            <mat-datepicker #endDate></mat-datepicker>
          </mat-form-field>

          <button class="btn btn-primary filter-button ele" id="button-addon4" type="submit"> Filter </button>
        </form>
      </div>
  </div>

  <div class="ticket-result">
    <div *ngIf="allTickets" class="ticket-container">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

        <!-- Ticket Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> SIR ID </th>
          <td mat-cell *matCellDef="let element">
            <a href='ticket/{{element.id}}'>{{element.id}}</a>
          </td>
        </ng-container>

        <!-- Type Column event source -->
        <ng-container matColumnDef="findingSourceSystem">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Source </th>
          <td mat-cell *matCellDef="let element"> {{element.findingSourceSystem}} </td>
        </ng-container>

        <!-- Type Column Related Event count -->
        <ng-container matColumnDef="label">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Related Cases </th>
          <td mat-cell *matCellDef="let element"> {{element.relatedVertices.length}} </td>
        </ng-container>

        <!-- Type Column event source -->
        <ng-container matColumnDef="caseStatus">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Case Status </th>
          <td mat-cell *matCellDef="let element"> {{element.caseStatus}} </td>
        </ng-container>

        <!-- Type Column event source -->
        <ng-container matColumnDef="caseCreateTimestamp">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Case Created </th>
          <td mat-cell *matCellDef="let element"> {{element.caseCreateTimestamp | date:'MMM d, y, h:mm:ss a'}}
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </div>
</div>

和 scss:

#main-body {
  padding-top: 20px;
}

table {
    width: 80%;
    margin-left: 10%;
}
.search-bar {
  margin-top: 20px;
  margin-left: 10%;
  margin-right: 10%;
  position: fixed;
  width: 80%;
  background: white;
}

.ticket-result {
  padding-top: 160px;
}

.filter-card {
    margin-left: 10%;
    margin-right: 10%;
}

#related-ticket{
    margin-left: 10%;
    margin-right: 10%;
}

.link {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
  }

  #button-addon4{
      width: 8%
  }

  // input::placeholder{
  //   color: black;
  // }  

  .fnt{
      color: blue;
  }

.json-data {
    background: lightgrey;
    height: 500px;
    overflow: auto;
}
table#t01 {
    width: 50%; 
    background-color: #f1f1c1;
    border: 1px solid black;
    border-collapse: collapse;
  }
  #thh, #tdd, #trr {
    padding: 15px;
    text-align: left;
    border: 1px solid black;
  }

  .tab { margin-left: 110px; }

  .filter-box {
    width: 27%;
    margin-right: 5px;
    margin-left: 5px;
  }


//   .filter-button {
//       background: #007bff!important;
//   }

  .ele {
      margin-right: 10px;
  }

  .filter-tab {
    margin: 2% 10%;
    border: none;
  }

  .related-ticket-table {
      margin: 2%;
  }

  .ticket-container {
    height: 550px;
    overflow: auto;
  }

  .dates{
    margin-left: 25%;
  }
  .btn-primary{
    background-color: #000099;
  }
  .border-primary{
    color: #000099;
  }
  #button-addon4{
    width: 15%
}
#iconSpan {
  position : absolute;
  top:1%;
  left :14%;
 }

我的逻辑是这样的:在 ngOnInit() 中我获取所有数据，然后在 ngAfterViewInit() 中，我进行排序和分页。但它不起作用。这是当前网页:我可以看到排序箭头，但点击什么也没发生，而且，页面按钮显示，但不起作用。任何人都可以帮助我吗？或者给个提示？

Answer 1

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

this.dataSource = new MatTableDataSource(this.ticketList)

相反，像这样在开始时新建对象:

dataSource = new MatTableDataSource<Ticket>();

在 getAllTickets 中只需设置数据:

this.dataSource.data = this.ticketList;

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

@ViewChild(MatSort, { static: false })