Firebase Angular Material Table应用程序的延迟加载数据

时间:2018-06-28 15:30:43

标签: angular firebase firebase-realtime-database angular-material database-performance

我使用Angular Cli,AngularFire2和Firebase。

我使用的是有角度的硬件表,它像带有少量数据的超级按钮一样工作,但是当我切换到300,000个对象时,我的应用程序完全变慢了,甚至出现错误...

显示我的数据

{
    "rpps": [

        {
            "IdentifiantPP": "10101553021",
            "Prenom": "PAULINE",
            "Nom": "DEROT",
            "Libellesavoir": "-",
            "MSS": "-"
        },
        {
            "IdentifiantPP": "10101553039",
            "Prenom": "PAULINE",
            "Nom": "LEMOINE",
            "Libellesavoir": "-",
            "MSS": "-"
        },

...


    ]
}

这是我的代码

// Service.ts

import { Injectable, Input } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import * as firebase from 'firebase';
import DataSnapshot = firebase.database.DataSnapshot;
import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';


import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

@Injectable()
export class AnnuairesService {

medecins: AngularFireList<any>;

constructor(private database: AngularFireDatabase) {this.medecins = database.list('rpps');  }

getMedecins() { return this.medecins.snapshotChanges().pipe(map(actions => {
  return actions.map(a => {
    const data = a.payload.val();
    const key = a.payload.key;
    return {key, ...data };
  });
})); }

}

Component.ts

export class MedListComponent   {

  Medecin = {
IdentifiantPP: '',
Prenom: '',
Nom: '',
Libellesavoir: '',
MSS: ''

   }

displayedColumns = [
'IdentifiantPP',
'Prenom',
'Nom',
'Libellesavoir',
'MSS'];

dataSource = new MatTableDataSource();

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); 
    filterValue = filterValue.toLowerCase(); 
    this.dataSource.filter = filterValue;
    }

@ViewChild(MatPaginator) paginator: MatPaginator;

ngAfterViewInit() {this.dataSource.paginator = this.paginator;}


ngOnInit(){ return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);}

constructor( private annuairesService: AnnuairesService, private router: Router, private database: AngularFireDatabase) {}

我认为必须有解决方案。.是否会再次出现此问题?我没有找到相关的主题。

enter image description here

0 个答案:

没有答案