Javascript Mat Paginator没有'；不显示

嗨，我正在使用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>

ts代码

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();
  }
}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从'@angular/forms'导入{FormBuilder，FormControl，FormGroup}；
从'@angular/material/paginator'导入{MatPaginator}；
从“../../services/ticket.service”导入{TicketService}；
从“../../models/Ticket”导入{Ticket}；
从“../../models/TicketDetail”导入{TicketDetail}；
从“../ticket detail/ticket.detail.component”导入{TicketDetailComponent}；
从'@angular/animations'导入{query}；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.scss']
})
导出类DashboardComponent实现OnInit{
票务列表：票务[]=[]；
原始票证列表：票证[]=[]；
displayedColumns=['id'、'findingSourceSystem'、'label'、'caseStatus'、'caseCreateTimestamp']；
displayedDetailColumns=['id'，'label'，'findingSourceSystem'，'caseCreateTimestamp']；
filteralform：FormGroup；
allTickets:boolean=true；
标签列表：字符串[]；
homeLabelList:字符串[]；
currentTicketId:string；
searchBy:string=''；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
建造商（私人票：票务服务、，
私有formBuilder:formBuilder）{}
恩戈尼尼特（）{
this.filteralform=this.formBuilder.group({
起始日期：['']，
截止日期：['']
});    
这是.getAllLabels（）；
这个.getAllTicket（）；
这个.getAllUniqueLabels（）；
}
get FilterPerformControls（）{返回this.FilteralForm.controls；}
getAllTicket（）{
this.allTickets=true；
让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；
});
}
filteralticket（）{
让startFlag=this.filteralform.value.startDate！=未定义&&this.filteralform.value.startDate！=“”；
让endFlag=this.filteralform.value.endDate！=未定义&&this.filteralform.value.endDate！=“”；
如果（开始标记| |结束标记）{
让数组=[]；
对于（让此原始标签列表的票证）{
let ticketStartDate=新日期（ticket.caseCreateTimestamp）；
让flag=startFlag&&ticketStartDate>=this.filteralform.value.startDate；
if（endFlag）{
flag=flag&&ticketStartDate{
this.labelList=res；
此.labelList.push（“全部”）；
this.labelList.sort（）；
});
}
getAllUniqueLabels（）{
this.ticket.getLabel（）.subscribe（（res:string[]）=>{
this.homeLabelList=res；
this.homeLabelList.sort（）；
});
}
搜索票证（）{
这个.getAllTicket（）；
}
}

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

---

您需要将其放置在

元素之外，因为它没有指定此子元素

替换：

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

与：

我参考了它。但是我找不到问题出在哪里，我想没有difference@jsbin，它不工作。实际上，我意识到页面显示为0.1s，并被表覆盖

  <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>