Блог

Я использую Angular 6, Firebase и Angular Material.

У меня есть 30 000 объектов json, хранящихся в firebase, которые я хочу загрузить в mat-таблицу. Только я получаю намного меньше, чем хотел. Я жду 30 секунд, прежде чем смогу щелкнуть по своему приложению, иногда Chrome выдает ошибку…

Тем не менее, я загружаю свои данные после разбивки на страницы.

Может кто-нибудь сказать мне, нормально ли это или есть стратегия для преодоления этой проблемы? Спасибо.

Может быть, я могу сделать это с помощью angular 7 и добавить прокрутку? У вас есть примеры запросов?

 export class TableComponent implements OnInit {

    showSpinner = true;

    Data = {nom: '', finessgeo: '', cat1: '', commune: '', CP: '', departement: '', tel: ''}

    displayedColumns = ['nom', 'finessgeo', 'cat1', 'commune', 'CP', 'departement', 'tel'];

    dataSource = new MatTableDataSource();

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

    @ViewChild(MatPaginator) paginator: MatPaginator;

    @ViewChild(MatSort) sort: MatSort;

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        return this.geoService.getGeos().subscribe(res => {
            this.dataSource.data =
                res;
            this.showSpinner = false;
        });
    }

    constructor(public authService: AuthService, private geoService:
        GeoService, private router: Router, private database: AngularFireDatabase) {
    }

    ngOnInit() {}
}
  

У меня есть несколько предложений.

Первое: не загружайте все 30 тыс. строк клиенту. Попробуйте использовать разбивку на страницы на стороне сервера. Это должно все исправить. Также вы должны реализовать все свои функции фильтрации и сортировки в API. Используйте клиент только для отображения этих данных.

Если это не вариант:

• Отсортируйте данные на сервере. Как можно скорее. Если вы можете, непосредственно внутри вашего запроса к базе данных.
• Проверьте, добавляет ли ваш компонент все строки в DOM. Это заняло бы очень много процессорного времени.
• Используйте вкладку performance в Chrome dev tools, чтобы проверить, что занимает так много времени. И попытайтесь ее оптимизировать.
• Проверьте свой HTML-шаблон. Постарайтесь сделать строки как можно более простыми. Нравится меньше вложенных элементов, дополнительных классов и так далее.