Saya mengalami beberapa masalah dengan Aplikasi Material sudut saya. Saya menggunakan datatable dengan paginator. Data tidak harus diurutkan.

Saat memuat data, saya menunjukkan mat-spinner

<div *ngIf="schools !== undefined">
        <mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
        <div *ngIf="!showSpinner">
            Keine Daten gefunden.
        </div>
</div>
<div *ngIf="schools !== undefined">
   <mat-table [dataSource]="dataSource"> 
      ...
   </mat-table>
   <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons></mat-paginator>
</div>

Dalam kasus normal saya memuat data dan pemintal berhenti berputar ketika data dimuat dan kemudian data ditampilkan. Ini bekerja dengan baik.

Tetapi dengan tabel, yang memiliki sekitar 400 baris, saya mengalami masalah ini:

Ketika data berhasil dimuat, pemintal menjadi sangat sangat lambat selama sekitar satu detik dan tabel data ditampilkan dengan semua konten. (dipisahkan oleh paginator)

Dibutuhkan sekitar 400 milidetik untuk memuat data dari api dan sekitar 3 milidetik untuk menguraikannya sehingga seharusnya tidak menjadi masalah.

Saya memuat data seperti itu:

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    this.loadData();
}

loadData() {
    this.apiService.getSchools().subscribe((schoolsData: any) => {
      this.schools = this.refParser.parse(schoolsData);
      this.dataSource = new MatTableDataSource(this.schools);

      this.cdr.detectChanges();
      this.dataSource.paginator = this.paginator;
    });
}

Saya sudah menemukan posting tentang stackoverflow yang akan membantu saya (Kinerja MatTable 6 Sudut dalam 1000 baris.). Tapi itu tidak membantu saya :(

Saya mencobanya seperti itu:

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    //this.loadData();
    this.dataSource = new MatTableDataSource();

    this.dataSource.paginator = this.paginator;
}

ngAfterViewInit(){
    setTimeout(() => {
      this.apiService.getSchools().subscribe((schoolsData: any) => {
        this.schools = this.refParser.parse(schoolsData);
        this.dataSource.data = this.schools;
        this.cdr.detectChanges();
      })
    })
}

Itu tidak memberi saya peningkatan kinerja. Satu-satunya hal yang terjadi adalah, paginator tidak berfungsi lagi.

Adakah yang tahu apa yang bisa membantu saya meningkatkan kinerja aplikasi saya?

Terima kasih atas jawaban Anda :)

4
Benjamin_Ellmer 9 Januari 2020, 02:55

3 jawaban

Jawaban Terbaik

Saya telah menghadapi masalah yang sama di masa lalu, Mat-Table menangani Deteksi Perubahan itu sendiri sehingga bukan masalah tabel mat, Ini adalah Sumber Data yang diatur dengan cara yang salah.

Jika Anda melewatkan semua data Anda sekaligus, itu akan membuat seluruh data hanya pada pemuatan pertama dan akan menunjukkan jeda.

Karena Anda menggunakan paginator, Anda harus memecah sumber data Anda menjadi pageSize, sehingga hanya 20 elemen yang akan dirender saat dimuat.

Buat instance paginator baru : actualPaginator: MatPaginator;

@ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    this.actualPaginator = value;
  }

this.actualPaginator.pageIndex = Math.ceil(this.schools.length/this.actualPaginator.pageSize) - 1;

 let nextPageData: any[] = [];
 nextPageData = this.schools.slice((this.actualPaginator.pageSize * this.actualPaginator.pageIndex),(this.actualPaginator.pageSize * (this.actualPaginator.pageIndex + 1)));
 this.dataSource.data = nextPageData;

Jadi, distribusikan data this.schools Anda dan muat per jumlah ukuran halaman, ubah sumber data dengan slot data this.schools berikutnya pada klik tombol berikutnya akan menyelesaikan masalah Anda.

Anda harus mengoperasikan mat-paginator secara terpisah dengan membuat instance MatPaginator baru yang merupakan solusi utama.

1
Vivek Singh 9 Januari 2020, 08:35

Anda harus menonaktifkan pemintal setelah selesai memuat data:

loadData() {
    this.apiService.getSchools().subscribe((schoolsData: any) => {
      this.schools = this.refParser.parse(schoolsData);
      this.dataSource = new MatTableDataSource(this.schools);
      this.showSpinner = false; // here!

      this.cdr.detectChanges();
      this.dataSource.paginator = this.paginator;
    });

Dan mungkin ubah template Anda seperti ini:

<mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
<div *ngIf="!shools && !showSpinner">
    Keine Daten gefunden.
</div>

<div *ngIf="dataSource">
   <mat-table [dataSource]="dataSource"> 
      ...
   </mat-table>
   <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons></mat-paginator>
</div>
0
slaesh 9 Januari 2020, 06:52

Anda hanya harus menukar tempat 2 baris kode.

Kode Anda

this.dataSource = new MatTableDataSource(this.schools);
...
this.dataSource.paginator = this.paginator;

Anda memberi tahu materi untuk merender semua tabel Anda dan hanya setelah merendernya mengirisnya dengan pager

Dan kode baru

this.dataSource.paginator = this.paginator;
...
this.dataSource = new MatTableDataSource(this.schools);
0
dimson d 24 Desember 2020, 06:15