재료 각도에서 파지네이터를 사용하는 방법은 무엇입니까?

재료 각도에서 파지네이터를 사용하는 방법은 무엇입니까?

나는 각진 것이 처음이고 내 앱에서 페이지화를 구현하려고 노력합니다.저는 이 재료 부품을 사용하려고 합니다.

저는 코의드로얻, 는을수있다니습나아래다▁▁can▁below있을 얻을 수 .length,pagesize,그리고.pageSizeOptions내 안에서.ts

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
</md-paginator>

export class PaginatorConfigurableExample {
  length = 100;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];
}

그러나 페이지가 변경될 때 위 표의 데이터를 변경하는 기능을 트리거할 수 없는 것 같습니다.또한 어떻게 사용합니까?nextPage,previousPage,hasNextPage,그리고.hasPreviousPage방법?

저도 같은 문제로 고민하고 있습니다.하지만 제가 어떤 연구를 하고 있는지 보여드릴 수 있습니다.기본적으로 먼저 foo.template.ts에서 @Output event 페이지를 추가합니다.

 <md-paginator #paginator
                [length]="length"
                [pageIndex]="pageIndex"
                [pageSize]="pageSize"
                [pageSizeOptions]="[5, 10, 25, 100]"
                (page)="pageEvent = getServerData($event)"
                >
 </md-paginator>

그리고 나중에 pageEvent 특성을 foo.component.ts 클래스에 추가하고 다른 특성을 추가하여 pageEvent 요구 사항을 처리해야 합니다.

pageEvent: PageEvent;
datasource: null;
pageIndex:number;
pageSize:number;
length:number;

그리고 서버 데이터를 가져오는 방법을 추가합니다.

ngOnInit() {
   getServerData(null) ...
}

public getServerData(event?:PageEvent){
  this.fooService.getdata(event).subscribe(
    response =>{
      if(response.error) {
        // handle error
      } else {
        this.datasource = response.data;
        this.pageIndex = response.pageIndex;
        this.pageSize = response.pageSize;
        this.length = response.length;
      }
    },
    error =>{
      // handle error
    }
  );
  return event;
}

따라서 기본적으로 페이지 관리자를 클릭할 때마다 getServerData(...) 메서드를 활성화하여 foo.service.ts를 호출하여 필요한 모든 데이터를 가져옵니다.이 경우 nextPage 및 nextXXX 이벤트는 뷰 렌더링 시 자동으로 계산되므로 처리할 필요가 없습니다.

이것이 당신에게 도움이 되기를 바랍니다.성공하셨다면 알려주세요. =]

어이, 그래서 우연히 이것을 발견하고 작동하게 되었습니다. 다음은 방법입니다.

내 구성 요소 안에.

<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize"
    [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>

내 구성 요소 안에.ts.

public array: any;
public displayedColumns = ['', '', '', '', ''];
public dataSource: any;    

public pageSize = 10;
public currentPage = 0;
public totalSize = 0;

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(private app: AppService) { }

ngOnInit() {
  this.getArray();
}

public handlePage(e: any) {
  this.currentPage = e.pageIndex;
  this.pageSize = e.pageSize;
  this.iterator();
}

private getArray() {
  this.app.getDeliveries()
    .subscribe((response) => {
      this.dataSource = new MatTableDataSource<Element>(response);
      this.dataSource.paginator = this.paginator;
      this.array = response;
      this.totalSize = this.array.length;
      this.iterator();
    });
}

private iterator() {
  const end = (this.currentPage + 1) * this.pageSize;
  const start = this.currentPage * this.pageSize;
  const part = this.array.slice(start, end);
  this.dataSource = part;
}

작업은 페이작내수다니행됩 .iterator방법.이 방법은 다음을 해결합니다.skip그리고.take에 할당합니다.dataSource재료 테이블의 경우.

Wesley Coetzee의 대답에 근거하여 제가 이것을 썼습니다.이 문제를 검색하는 모든 사람에게 도움이 되기를 바랍니다.목록 중간에 페이지 관리자 크기를 스왑하는 버그가 있어서 답변을 제출했습니다.

페이지 관리자 html 및 목록

<mat-paginator [length]="localNewspapers.length" pageSize=20
               (page)="getPaginatorData($event)" [pageSizeOptions]="[10, 20, 30]"
               showFirstLastButtons="false">
</mat-paginator>
<mat-list>
   <app-newspaper-pagi-item *ngFor="let paper of (localNewspapers | 
                         slice: lowValue : highValue)"
                         [newspaper]="paper"> 
  </app-newspaper-pagi-item>

구성 요소 논리

import {Component, Input, OnInit} from "@angular/core";
import {PageEvent} from "@angular/material";

@Component({
  selector: 'app-uniques-newspaper-list',
  templateUrl: './newspaper-uniques-list.component.html',
})
export class NewspaperUniquesListComponent implements OnInit {
  lowValue: number = 0;
  highValue: number = 20;

  // used to build a slice of papers relevant at any given time
  public getPaginatorData(event: PageEvent): PageEvent {
    this.lowValue = event.pageIndex * event.pageSize;
    this.highValue = this.lowValue + event.pageSize;
    return event;
  }

}

슬라이스 파이프를 사용하여 Angular Paginator를 데이터 테이블과 연결하는 또 다른 방법입니다.여기서 데이터는 서버에서 한 번만 가져옵니다.

보기:

 <div class="col-md-3" *ngFor="let productObj of productListData | 
     slice: lowValue : highValue">
       //actual data dispaly  
 </div>

<mat-paginator [length]="productListData.length" [pageSize]="pageSize" 
   (page)="pageEvent = getPaginatorData($event)">
</mat-paginator> 

요소

    pageIndex:number = 0;
    pageSize:number = 50;
    lowValue:number = 0;
    highValue:number = 50;       

  getPaginatorData(event){
     console.log(event);
     if(event.pageIndex === this.pageIndex + 1){
        this.lowValue = this.lowValue + this.pageSize;
        this.highValue =  this.highValue + this.pageSize;
       }
    else if(event.pageIndex === this.pageIndex - 1){
       this.lowValue = this.lowValue - this.pageSize;
       this.highValue =  this.highValue - this.pageSize;
      }   
       this.pageIndex = event.pageIndex;
 }

구성 요소:

import { Component,  AfterViewInit, ViewChild } from @angular/core;
import { MatPaginator } from @angular/material;

export class ClassName implements AfterViewInit {
    @ViewChild(MatPaginator) paginator: MatPaginator;
    length = 1000;
    pageSize = 10;
    pageSizeOptions: number[] = [5, 10, 25, 100];

    ngAfterViewInit() {
        this.paginator.page.subscribe(
           (event) => console.log(event)
    );
}

HTML

<mat-paginator 
   [length]="length"
   [pageSize]="pageSize" 
   [pageSizeOptions]="pageSizeOptions"
   [showFirstLastButtons]="true">
</mat-paginator>

는 " 이벤트를 캡처하는 것이 이 문제를 하려면 "페이지" 이벤트를 추가해야 것입니다.(page)='yourEventHandler($event)tag.md -remediator의 할 수 있습니다.

여기서 작업 예제 확인

API 문서도 여기에서 확인할 수 있습니다.

이것에 몇 시간을 투자한 후에 나는 이것이 페이지화를 적용하는 가장 좋은 방법이라고 생각합니다.그리고 더 중요한 것은 효과가 있다는 것입니다.이 코드는 내 페이지 관리자 코드입니다.<mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

요소 에 내구요소내부.@ViewChild(MatPaginator) paginator: MatPaginator; 항목을 됩니다. 이렇게 하면 됩니다.ngAfterViewInit() {this.dataSource.paginator = this.paginator;}쉽죠? 만약 당신에게 효과가 있다면 이것을 답으로 표시하세요.

이 문제는 몇 시간을 들인 후에 해결되었고 저는 그것을 작동시켰습니다.이것이 각진 재료로 페이지화를 해결하는 가장 간단한 방법이라고 믿습니다. - 먼저 (component.html) 파일 작업부터 시작하십시오.

 <mat-paginator [pageSizeOptions]="[2, 5, 10, 15, 20]" showFirstLastButtons>
 </mat-paginator>

및 (component.ts) 파일에서 수행합니다.

 import { MatPaginator } from '@angular/material/paginator';
 import { Component, OnInit, ViewChild } from '@angular/core';

 export interface UserData {
 full_name: string;
 email: string;
 mob_number: string;
 }

 export class UserManagementComponent implements OnInit{
  dataSource : MatTableDataSource<UserData>;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(){
    this.userList();
   }

    ngOnInit() { }

   public userList() {

   this._userManagementService.userListing().subscribe(
      response => {

      console.log(response['results']);
      this.dataSource = new MatTableDataSource<UserData>(response['results']);
      this.dataSource.paginator = this.paginator;
      console.log(this.dataSource);

     },


      error => {});

     }

 }

현재 작동 중인 모듈(module.ts) 파일에서 페이지화 모듈을 가져와야 합니다.

  import {MatPaginatorModule} from '@angular/material/paginator';

   @NgModule({
      imports: [MatPaginatorModule]
    })

그것이 당신에게 효과가 있기를 바랍니다.

여기서 다루기 까다로운 부분은 페이지 이벤트입니다.페이지 이벤트 기능을 정의할 때까지 각 재료 설명서를 따를 수 있습니다.

참고를 위해 https://material.angular.io/components/paginator/examples 을 방문하세요.

이와 관련하여 저는 몇 시간 동안 열심히 일을 할 것입니다.관련 HTML 파일에서 다음과 같이 보여야 합니다.

<pre>
<mat-paginator
    [pageSizeOptions]="pageSizeOptions"
    [pageSize]="Size"
    (page)="pageEvent = pageNavigations($event)"
    [length]="recordCount">
</mat-paginator>
</pre>

그런 다음 관련 형식 스크립트 파일과 다음 코드로 이동합니다.

선언,

@Input('data') customers: Observable<Customer[]>;
pageEvent: PageEvent;
Page: number=0;
Size: number=2;
recordCount: number;
pageSizeOptions: number[] = [2,3,4,5];

페이지 탐색의 주요 부분은 다음과 같습니다.

pageNavigations(event? : PageEvent){
    console.log(event);
    this.Page = event.pageIndex;
    this.Size = event.pageSize;
    this.reloadData();
  }

백엔드에서 데이터를 호출하려면 다음 기능이 필요합니다.

reloadData() {

    this.customers = this.customerService.setPageSize(this.Page ,this.Size);
    this.customerService.getSize().subscribe(res => {
      this.recordCount = Number(res);
     
      console.log(this.recordCount);
    });
  }

위에서 언급한 구현 이전에 당사의 서비스 파일에는 다음과 같은 서비스 호출이 포함되어 있어야 합니다.

setPageSize(page: number, size: number): Observable<any> {
    return this.http.get(`${this.baseUrl}?pageSize=${size}&pageNo=${page}`);
  }

그런 다음 모두 앱에서 페이지를 활성화할 준비를 합니다.언제든지 관련 질문을 해주시면 감사하겠습니다.

적합한 솔루션:

에서 데이터 소스를 정의해야 합니다(기능에서 데이터 소스를 정의하지 마십시오).이와 같은 것

dataSource: MatTableDataSource<Listing> = new MatTableDataSource();
pageEvent: PageEvent;
datasource: null;
pageSizeOptions: number[] = [5, 10, 12, 15];
pageIndex: number;
pageSize: number;
length: number;

constructor(private yourService: YourService) {
}
ngOnInit() {
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;
   this.pageIndex=0;
   this.pageSize=10;
   this.yourService.getListItems(this.pageSize, 
   this.pageIndex).subscribe(res => {
          this.dataSource.data = res;
          this.lenght=res.lenght();
       });
   }  
handlePageEvent(event: PageEvent) {
   this.yourService.getListItems(event.pageSize, 
   event.pageIndex).subscribe(e=>{
     this.dataSource.data = res;
});       
return event;
}

 

그리고 당신의 HTML 구성 요소는 다음과 같습니다.

 <mat-paginator (page)="handlePageEvent($event)"
      [pageSizeOptions]="pageSizeOptions"
      [pageSize]="pageSize"
      class="sticky left-0"
      [length]="length"
      [pageIndex]="pageIndex"
      aria-label="Select page"
  ></mat-paginator>

저는 답을 대충 훑어보았고, 몇 가지 좋은 도구들이 있지만, 더 깨끗한 방법들이 있다고 생각합니다.

에 HTML을 하려고 합니다.#paginator 때사선로택기들어예, 를할인용들처럼 때 @ViewChild(MatPaginator) paginator!: MatPaginator;

    <mat-paginator #paginator
        [pageSizeOptions]="[5, 10, 20]"
        showFirstLastButtons
        aria-label="Select page of periodic elements">
    </mat-paginator>

코드에서 를 상대코서페관다리할음를다당니합에자이에 합니다.this.dataSource.paginator " 가능"이라는 이름의 " 가능" 속성을 하십시오.page.

// bind to paginator control
@ViewChild(MatPaginator) paginator!: MatPaginator;

// subscribe to paginator events via observable page property
ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.paginator.page.subscribe(page => {
    this.searchItems();
  });
}

참고:searchItems는 합니다.paginator항목 및 특정 페이지 번호를 요청하고, 필터가 없는 인수 검색이 없을 때 요청합니다.

메서드를 호출하여 API 또는 다른 소스에서 항목을 가져오고 테이블 테이블을 채웁니다.

참고: 실제 시나리오에서는 국가 운영을 통해 이 모든 것을 수행하고 싶습니다.

코드는 https://github.com/abcox/toybox-web-ng2/tree/main/src/app/contact/contact-list 에 있습니다.

언급URL : https://stackoverflow.com/questions/45318164/how-to-use-paginator-from-material-angular