it-swarm.asia

Açısal malzemeden sayfalama nasıl kullanılır?

Açısal olarak yeniyim ve uygulamamda sayfalama yapmaya çalışıyorum. Bu malzeme bileşenini kullanmaya çalışıyorum.

Aşağıdaki kodla, .ts dosyamda length, pagesize ve pageSizeOptions öğelerini alabilirim

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
</md-paginator>
export class PaginatorConfigurableExample {

  length = 100;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  }
}

ancak sayfa değiştirildiğinde yukarıdaki tablodaki verileri değiştiren bir işlevi tetikleyemiyorum. Ayrıca, nextPage, previousPage, hasNextPage ve hasPreviousPage yöntemlerini nasıl kullanırım?

16
HeisenBerg

Burada da aynı mücadele ediyorum. Fakat size biraz araştırma yaptığım şeyi gösterebilirim . Temel olarak, ilk önce foo.template.ts : sayfasındaki @Output olayını eklemeye başlarsınız:

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

Ve daha sonra, foo.component.ts class içindeki pageEvent niteliğini ve paginator gereksinimlerini yerine getirmek için diğerlerini eklemeniz gerekir:

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

Ve sunucu verilerini getirecek yöntemi ekleyin:

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

Bu nedenle, temel olarak sayfa oluşturucuyu her tıkladığınızda, foo.service.ts gereken tüm verileri elde edecek olan getServerData (..) yöntemini etkinleştireceksiniz. Bu durumda, nextPage ve nextXXX olaylarını işlemeniz gerekmez, çünkü görünüm oluşturma sırasında otomatik olarak hesaplanır.

Umarım bu size yardımcı olabilir. Eğer başarırsan bana haber ver. =]

25
aelkz

Hey bu yüzden bu tökezledi ve çalışmaya başladım, işte nasıl:

içinde/ component.html

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

İçimdeki component.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;
}

Tüm disk belleği işi iterator yöntemiyle yapılır. Bu yöntem skip ve take işlevini yerine getirir ve bunu Material tablosunun dataSource dizinine atar.

7
Wesley Coetzee

Slgular Pipe'ı kullanarak veri tablosu ile Angular Paginator'ı bağlamanın başka bir yolu.

Görünüm:

 <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> 

Bileşen

    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;
 }
5
Asridh Kumar

Asıl sorudaki sorun, "page" olayı yakalamamanızdır, bunu çözmek için md-paginator etiketinde bir nitelik olarak (page)='yourEventHandler($event) 'eklemeniz gerekir.

çalışan bir örneği kontrol edin burada

API belgelerini de kontrol edebilirsiniz here

2
LH7

Bu sorun birkaç saat harcadıktan sonra çözüldü ve çalışmaya başladım. Bu, sayfalandırmayı angular malzeme ile çözmenin en basit yolunun olduğuna inanıyor. - İlk önce (component.html) dosyası üzerinde çalışarak başlayın.

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

ve (component.ts) dosyasında yapın

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

     }

 }

Hatırla Sayfalandırma modülünü şu anda çalışan modülünüzde (module.ts) içe aktarmalısınız.

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

   @NgModule({
      imports: [MatPaginatorModule]
    })

Umarım sizin için çalışacaktır.

1
gunjan girdhar

wesley Coetzee'nin cevabını temel alarak bunu yazdım. Umarım bu sorunu çözen herkese yardımcı olabilir. Listenin ortasında sayfa numarasının boyutunu değiştirmekle ilgili hatalar vardı, bu yüzden cevabımı iletiyorum:

Paginator html ve list

<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>

Bileşen mantığı

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;

  {...} // not relevant logic

  // used to build an array 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;
  }

}
1
avokado

Bileşen:

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>
0
Viree

Bunun üzerine birkaç saat geçirdikten sonra sayfalamanın uygulanmasının en iyi yol olduğunu düşünüyorum. Ve daha da önemlisi çalışır. Bu benim paginator kodum <mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

Bileşenimin içinde @ViewChild(MatPaginator) paginator: MatPaginator; çocuğu görüntülemek için ve nihayetinde tablo verisi için paginator'ı bağlamak zorundasınız ve bu nasıl yapılır ngAfterViewInit() {this.dataSource.paginator = this.paginator;} Kolay değil mi? sizin için işe yarıyorsa, bunu cevap olarak işaretleyin.

0
Chetan Sharma