8

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

我有 30,000 个 json 对象存储在 firebase 中，我想将它们加载到 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() {}
}
4

1 回答 1

8

我有一些建议。

第一：不要将所有 30k 行加载到客户端。尝试使用服务器端分页。这应该可以解决所有问题。您还必须在 api 上实现所有过滤和排序功能。使用客户端只是为了显示该数据。

如果这不是一个选项：

  • 对服务器上的数据进行排序。尽早。如果可以的话，直接在你的数据库里面查询。
  • 检查您的组件是否将所有行添加到 DOM 中。这将花费很多 cpu 时间。
  • 使用 chrome 开发工具中的性能选项卡来检查花费了这么长时间。并尝试优化它。
  • 检查您的 html 模板。尝试使行尽可能简单。像更少的嵌套元素，额外的类等等。
于 2019-04-24T07:43:15.013 回答