Question

我使用Angular 6，Firebase和Angular材质。

我在firebase中存储了30,000个json对象，我想将它们加载到mat-table中。只有我能实现自己的目标。我等待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() {}
}

Answer 1

我有一些建议。

首先：请勿将所有30k行都加载到客户端。尝试使用服务器端分页。这应该解决所有问题。另外，您还必须在api上实现所有过滤和排序功能。使用客户端仅显示该数据。

如果这不是一个选择：

对服务器上的数据进行排序。尽快地。如果可以的话，直接在数据库查询中。
检查您的组件是否将所有行都添加到DOM中。这将花费大量的CPU时间。
使用chrome开发工具中的“性能”标签，检查花费了这么长时间。并尝试对其进行优化。
检查您的html模板。尝试使行尽可能简单。像较少嵌套的元素，其他类等等。

3万行垫子桌的性能

1 个答案: