typescript - Angular: Kako ću povezati pageSize Mat-paginatora da prikaže tu količinu stavki?

Imam mat-accordion s više mat-expansion-panel. Želim primijeniti paginaciju za accordion. Ispod je moj kod:

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

Ovo je moj kod do sada prema dokumentaciji Paginatora u Angular Materialu. Prikaz paginatora se savršeno mijenja ako odaberem opciju, ali kako ću povezati akordeon s njim i promijeniti prikaz prema unosu pageSize ili naprijed/nazad?

Molim te predloži mi odgovor na ovo.

Odgovor #1

Kao što sam spomenuo u komentaru, bolje je da kontrolirate paginaciju na strani servera, ali ovdje pretpostavljamo da učitavate sve podatke u ngOnInit.

HTML :

1. rezultat -> odabraniRezultat
2. za veliko početno slovo koristite titlecase u pipeu
3. dodaj getData na pageEvent u mat-paginator

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

evo primjera online https://stackblitz.com/edit/angular-ivy-wcwufj