javascript - 垫分页器没有显示

Question

您好，我正在使用 angular 来显示一个表格页面，在这个页面中我将显示 100 条记录并在记录上实现分页 我使用了官方文档中的示例，但是没有用。我挣扎了一段时间，所以我想知道我是否可以在这里得到帮助: 这是我为页面创建的组件。 在 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"> 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]="ticketList" class="mat-elevation-z8">

        <!-- Ticket Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> 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> 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> 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> 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> 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>
        <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
      </table>
    </div>
  </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: 520px;
    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%;
 }

代码

import { Component, OnInit, ViewChild } from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {MatPaginator} from '@angular/material/paginator';

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 {

  ticketList: 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 = '';

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

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

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

  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).subscribe((res: Ticket[]) => {
      this.ticketList = res;
      this.ticketList['paginator'] = this.paginator;
      this.originalTicketList = 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;
    }
  }

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

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

  searchTicket() {
    this.getAllTicket();
  }
}

最初，我想知道 css 中的 .ticket-container 类是否影响了分页，我删除了，当我向下滚动时表格上升。另外，仍然没有显示页面。这就是我现在得到的。您可以看到表格可以向下滚动但没有页面。

Answer 1

你需要把它放在<table>之外元素，因为它没有指定此子元素。

替换:

  <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</table>

与:

</table>
<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>