javascript - 如何根据角度材料分页器中选择的pagesozeoption显示记录？

Question

home.component.ts

import {PageEvent} from '@angular/material/paginator';
import { MatTableDataSource } from "@angular/material/table";
import {  MatPaginator } from '@angular/material/paginator';


import { ApiCallsService } from '../../services/api-calls.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit{
    length!: number;
    pageIndex:number = 0;
    postsperpage: number = 20;
    pageSizeOptions = [2, 5, 10, 50, 100];
    lowVal:number = 0;
    highVal:number = 20;
    // currentPage: number = 0;
    pageEvent: PageEvent = new PageEvent;

    @ViewChild(MatPaginator) paginator!: MatPaginator;
    displayedColumns = ["Id", "Siteid", "Location", "Plant"];

  ELEMENT_DATA: Element[] = [
    {"Id":"1","Siteid":"PCC","Location":"30GSO-PCV-001","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"2","Siteid":"PCC","Location":"30SCW-PCV-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"3","Siteid":"PCC","Location":"30SCW-TCV-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"4","Siteid":"PCC","Location":"3FWC-FCV-0228-01","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"5","Siteid":"PCC","Location":"30GSS-GSC","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"6","Siteid":"PCC","Location":"30PNL-OPS","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"7","Siteid":"PCC","Location":"30SCW-PIC-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"8","Siteid":"PCC","Location":"30SCW-TIC-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"9","Siteid":"PCC","Location":"30SCW-TICW-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"10","Siteid":"PCC","Location":"30EHC-EHOC(A)","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"11","Siteid":"PCC","Location":"30GSO-PCV-001","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"12","Siteid":"PCC","Location":"30SCW-PCV-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"13","Siteid":"PCC","Location":"30SCW-TCV-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"14","Siteid":"PCC","Location":"3FWC-FCV-0228-01","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"15","Siteid":"PCC","Location":"30GSS-GSC","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"16","Siteid":"PCC","Location":"30PNL-OPS","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"17","Siteid":"PCC","Location":"30SCW-PIC-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"18","Siteid":"PCC","Location":"30SCW-TIC-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"19","Siteid":"PCC","Location":"30SCW-TICW-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"20","Siteid":"PCC","Location":"30EHC-EHOC(A)","Plant":"PCC3","Subunit":"30.0"},  
    {"Id":"21","Siteid":"PCC","Location":"30GSO-PCV-001","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"22","Siteid":"PCC","Location":"30SCW-PCV-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"23","Siteid":"PCC","Location":"30SCW-TCV-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"24","Siteid":"PCC","Location":"3FWC-FCV-0228-01","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"25","Siteid":"PCC","Location":"30GSS-GSC","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"26","Siteid":"PCC","Location":"30PNL-OPS","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"27","Siteid":"PCC","Location":"30SCW-PIC-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"28","Siteid":"PCC","Location":"30SCW-TIC-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"29","Siteid":"PCC","Location":"30SCW-TICW-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"30","Siteid":"PCC","Location":"30EHC-EHOC(A)","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"31","Siteid":"PCC","Location":"30GSO-PCV-001","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"32","Siteid":"PCC","Location":"30SCW-PCV-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"33","Siteid":"PCC","Location":"30SCW-TCV-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"34","Siteid":"PCC","Location":"3FWC-FCV-0228-01","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"35","Siteid":"PCC","Location":"30GSS-GSC","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"36","Siteid":"PCC","Location":"30PNL-OPS","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"37","Siteid":"PCC","Location":"30SCW-PIC-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"38","Siteid":"PCC","Location":"30SCW-TIC-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"39","Siteid":"PCC","Location":"30SCW-TICW-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"40","Siteid":"PCC","Location":"30EHC-EHOC(A)","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"41","Siteid":"PCC","Location":"30GSO-PCV-001","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"42","Siteid":"PCC","Location":"30SCW-PCV-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"43","Siteid":"PCC","Location":"30SCW-TCV-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"44","Siteid":"PCC","Location":"3FWC-FCV-0228-01","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"45","Siteid":"PCC","Location":"30GSS-GSC","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"46","Siteid":"PCC","Location":"30PNL-OPS","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"47","Siteid":"PCC","Location":"30SCW-PIC-006","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"48","Siteid":"PCC","Location":"30SCW-TIC-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"49","Siteid":"PCC","Location":"30SCW-TICW-003","Plant":"PCC3","Subunit":"30.0"},
    {"Id":"50","Siteid":"PCC","Location":"30EHC-EHOC(A)","Plant":"PCC3","Subunit":"30.0"},                                      

  ];
  dataSource = new MatTableDataSource<Element>(this.ELEMENT_DATA);
  splicedData!: Element[];
  
  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.splicedData = this.ELEMENT_DATA.slice(((0 + 1) - 1) * this.postsperpage).slice(0, this.postsperpage);

 } 

  pageChanged(event: PageEvent) {
    event.length;
    console.log("event.length(total records) = ",event.length + " " + "event=",event);

    const ELEMENT_DATA = [...this.ELEMENT_DATA];
    // console.log("...Input records",ELEMENT_DATA);

    const offset = ((event.pageIndex + 1) - 1) * event.pageSize;
    this.splicedData = this.ELEMENT_DATA.slice(offset).slice(0, event.pageSize);
    
    //   return event;

    // console.log("records to be displayed/page i.e. postsperpage",this.dataSource.data);
  }
}

home.component.html


<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="Id">
      <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Id}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="Siteid">
      <mat-header-cell *matHeaderCellDef> SiteId </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Siteid}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="Location">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Location}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="Plant">
      <mat-header-cell *matHeaderCellDef> Plant </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Plant}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Subunit">
      <mat-header-cell *matHeaderCellDef> Subunit </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.Subunit}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

</div>

<mat-paginator #paginator [length]="ELEMENT_DATA?.length" [pageSize]="postsperpage"
               [pageSizeOptions]="pageSizeOptions" (page)="pageChanged($event)">

</mat-paginator>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {MatPaginatorModule} from '@angular/material/paginator';
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatPaginatorModule,
    HttpClientModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我有几个页面大小选项，单击时应在表中相应地显示记录。如果我点击 5，那么应该只显示来自 id:1-5 的记录！！

在这种情况下，如果有人可以帮助我，那就太好了，如果在 API 调用之后显示从获取的记录中的数据

javascript - 如何根据角度材料分页器中选择的pagesozeoption显示记录？

0 回答 0

Related

Reference