Angular：我将如何 link Mat-paginator 的 pageSize 来呈现那么多的项目？

Question

我有一个 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 文档，这是我到目前为止的代码。如果我给出选择，分页器视图会发生完美变化，但我将如何 link 手风琴并根据 pageSize 输入或 forward/backwar?

更改视图

请给我一个答案。

Answer 1

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

HTML:

结果 -> selectedResult
对于首字母大写，在竖线中使用首字母大写
在 mat-paginator 的 pageEvent 中添加 getData

<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

Angular：我将如何 link Mat-paginator 的 pageSize 来呈现那么多的项目？

Angular: How will i link the pageSize of Mat-paginator to render that amount of items?

pagination

typescript

angular-material2

angular

angular9