时间戳

首页 > 解决方案 > Angular：我将如何链接 Mat-paginator 的 pageSize 以呈现该数量的项目？

angular - Angular：我将如何链接 Mat-paginator 的 pageSize 以呈现该数量的项目？

问题描述

我有mat-accordion多个mat-expansion-panel. 我想为手风琴应用分页。下面是我的代码：

HTML

<mat-accordion displayMode="flat" multi class="mat-table">
  <section class="mat-elevation-z2 mat-header-row">
    <span class="mat-header-cell">User Id</span>
    <span class="mat-header-cell">Name</span>
    <span class="mat-header-cell">Exam Name</span>
    <span class="mat-header-cell">Exam Category</span>
  </section>
  <mat-expansion-panel *ngFor="let result of results">
    <mat-expansion-panel-header class="mat-row">
      <span class="mat-cell">{{ result.user.id }}</span>
      <span class="mat-cell">
        {{ result.user.firstName[0].toUpperCase() + result.user.firstName.substr(1).toLowerCase() }}
        {{ result.user.middleName!=='' ? ' ' + result.user.middleName[0].toUpperCase() + result.user.middleName.substr(1).toLowerCase() + ' ' : '' }}
        {{ ' ' + result.user.lastName[0].toUpperCase() + result.user.lastName.substr(1).toLowerCase()}}
      </span>
      <span class="mat-cell">{{ result.exam.examName }}</span>
      <span class="mat-cell">{{ result.exam.examCategory.examCategoryName }}</span>
    </mat-expansion-panel-header>
    <div class="row">
      <div class="col">
        <h3>Personal Details:</h3> <br>
        Email: {{ result.user.emailId }} <br>
        Phone: {{ result.user.mobileNumber }} <br>
        Gender: {{ result.user.gender }} <br>
        Age: {{ result.user.age }} <br>
        City: {{ result.user.city }} <br>
        State: {{ result.user.state }} <br>
        Country: {{ result.user.country }}
      </div>
      <div class="col">
        <h3>Education Details:</h3> <br>
        College: {{ result.user.college }} <br>
        Degree: {{ result.user.degree }} <br>
        Graduation Year: {{ result.user.graduationYear }} <br>
        Graduation Percentage: {{ result.user.graduationPercentage }} <br>
        Skills: {{ result.user.skills }}
      </div>
      <div class="col" *ngFor="let resultDetail of result.resultDetailSet;">
        <h3>
          {{ resultDetail.examDetail.questionCategory.questionCategoryName }} -
          Marks: {{ resultDetail.examDetail.section.marksPerQuestion }}
        </h3> <br>
        Number of Questions: {{ resultDetail.examDetail.numberOfQuestions }} <br>
        Marks Obtained: {{ resultDetail.obtainedMarks }}/{{ resultDetail.totalMarks }} <br>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>
<mat-paginator #paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event" showFirstLastButtons></mat-paginator>

TS

results = [];
length: number;
pageSize = 5;
pageSizeOptions: number[] = [1, 2, 5, 10];
pageEvent: PageEvent;

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

setPageSizeOptions(setPageSizeOptionsInput: string) {
  if (setPageSizeOptionsInput) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }
}

ngOnInit() {
  this.adminService.getCandidateResult().subscribe(response => {
    this.results = response.resultList;
    this.length = this.results.length;
    this.isLoading = false;
  });
}

根据 Angular Material 中 Paginator 的文档，这是我到目前为止的代码。如果我给出选择，分页器视图将完美地改变，但是我将如何将手风琴与它链接并根据pageSize输入或前进/后退更改视图？

请给我一个答案。

标签： angulartypescriptpaginationangular-material2angular9

解决方案

正如我在评论中提到的，最好在服务器端控制分页，但在这里我们认为您在 ngOnInit 中加载所有数据。

HTML：

  1. 结果 -> 选定结果
  2. 对于大写的第一个字符，在管道中使用 titlecase
  3. 将 getData 添加到 mat-paginator 中的 pageEvent
<mat-accordion displayMode="flat" multi class="mat-table">
  <section class="mat-elevation-z2 mat-header-row">
    <span class="mat-header-cell">User Id</span>
    <span class="mat-header-cell">Name</span>
    <span class="mat-header-cell">Exam Name</span>
    <span class="mat-header-cell">Exam Category</span>
  </section>
  <mat-expansion-panel *ngFor="let result of selectedResult">
    <mat-expansion-panel-header class="mat-row">
      <span class="mat-cell">{{ result.user.id }}</span>
      <pre>
      </pre>
      <span class="mat-cell">
        {{ result.user.firstName | titlecase }} 
        {{ result.user.middleName | titlecase }} 
        {{ result.user.lastName | titlecase }} 
      </span>
      <span class="mat-cell">{{ result.exam.examName }} </span>
      <span class="mat-cell">{{ result.exam.examCategory.examCategoryName }} </span>
    </mat-expansion-panel-header>
    <div class="row">
      <div class="col">
        <h3>Personal Details:</h3> <br>
        Email: {{ result.user.emailId }} <br>
        Phone: {{ result.user.mobileNumber }} <br>
        Gender: {{ result.user.gender }} <br>
        Age: {{ result.user.age }} <br>
        City: {{ result.user.city }} <br>
        State: {{ result.user.state }} <br>
        Country: {{ result.user.country }}
      </div>
      <div class="col">
        <h3>Education Details:</h3> <br>
        College: {{ result.user.college }} <br>
        Degree: {{ result.user.degree }} <br>
        Graduation Year: {{ result.user.graduationYear }} <br>
        Graduation Percentage: {{ result.user.graduationPercentage }} <br>
        Skills: {{ result.user.skills }}
      </div>
      <div class="col" *ngFor="let resultDetail of result.resultDetailSet;">
        <h3>
          {{ resultDetail.examDetail.questionCategory.questionCategoryName }} -
          Marks: {{ resultDetail.examDetail.section.marksPerQuestion }}
        </h3> <br>
        Number of Questions: {{ resultDetail.examDetail.numberOfQuestions }} <br>
        Marks Obtained: {{ resultDetail.obtainedMarks }}/{{ resultDetail.totalMarks }} <br>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>
<mat-paginator #paginator [length]="length" [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getData($event)" showFirstLastButtons></mat-paginator>

TS：

results = [];
selectedResult = [];
length: number;
pageSize = 5;
pageSizeOptions: number[] = [1, 2, 5, 10];
pageEvent: PageEvent;

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

setPageSizeOptions(setPageSizeOptionsInput: string) {
  if (setPageSizeOptionsInput) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }
}

getData( event?: PageEvent) {
  this.selectedResult = this.results.slice(event.pageIndex * event.pageSize, event.pageIndex * event.pageSize + event.pageSize);
  return event;
}


ngOnInit() {
  this.adminService.getCandidateResult().subscribe(response => {
    this.results = response.resultList;
    this.selectedResult = this.results.slice(0, this.pageSize);
    this.length = this.results.length;
    this.isLoading = false;
  });
}

这是在线示例https://stackblitz.com/edit/angular-ivy-wcwufj

推荐阅读