Website-Suche

typescript - Angular: Wie verknüpfe ich die pageSize von Mat-Paginator, um diese Anzahl von Elementen anzuzeigen?

Ich habe ein mat-accordion mit mehreren mat-expansion-panel. Ich möchte eine Paginierung für das Akkordeon anwenden. Unten ist mein Code:

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

Das ist mein Code bisher gemäß der Dokumentation des Paginators in Angular Material. Die Paginator-Ansicht ändert sich perfekt, wenn ich eine Auswahl treffe, aber wie verbinde ich das Akkordeon damit und ändere die Ansicht entsprechend der pageSize-Eingabe oder vorwärts/rückwärts?

Bitte schlage mir eine Antwort darauf vor.

Antwort #1

Wie ich im Kommentar erwähnt habe, ist es besser, wenn Sie die Paginierung auf der Serverseite steuern, aber hier gehen wir davon aus, dass Sie alle Daten im ngOnInit laden.

HTML :

  1. Ergebnis -> ausgewähltesErgebnis
  2. Für den ersten Großbuchstaben verwenden Sie in der Pipe die Großschreibung.
  3. Fügen Sie getData zum pageEvent im mat-paginator hinzu
<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;
  });
}

hier ist ein Online-Beispiel https://stackblitz.com/edit/angular-ivy-wcwufj