通过使用Angular 2+处理大型Firestore Collection的最佳方法是什么？

Question

我目前正在尝试两个数据表。 Ngx-SmartTable和DxDataGrid。

它们似乎都没有连接startAt和startAfter方法的选项。

我尝试查找其他选项，但是没有什么真的适合我的需求。

我不需要无限滚动。我有很多数据，我说的是100,000条以上的记录。

每次显示数据表时都无法加载那么多数据。

我尝试了一些选择，例如构建自定义数据表并实现“下一个”和“上一个”逻辑，但是，它不考虑页面数或搜索查询。

    loadItems() {
    this.firestore.collection('People', ref => ref
        .limit(5)
        .orderBy('timestamp', 'desc')
    ).snapshotChanges()
        .subscribe(response => {
        if (!response.length) {
            console.log("No Data Available");
            return false;
        }
        this.firstInResponse = response[0].payload.doc;
        this.lastInResponse = response[response.length - 1].payload.doc;

        this.tableData = [];
        for (let item of response) {
            this.tableData.push(item.payload.doc.data());
        }

        //Initialize values
        this.prev_strt_at = [];
        this.pagination_clicked_count = 0;
        this.disable_next = false;
        this.disable_prev = false;

        //Push first item to use for Previous action
        this.push_prev_startAt(this.firstInResponse);
        }, error => {
        });
    }

然后

//Show previous set 
prevPage() {
    this.disable_prev = true;
    this.firestore.collection('People', ref => ref
    .orderBy('timestamp', 'desc')
    .startAt(this.get_prev_startAt())
    .endBefore(this.firstInResponse)
    .limit(5)
    ).get()
    .subscribe(response => {
        this.firstInResponse = response.docs[0];
        this.lastInResponse = response.docs[response.docs.length - 1];

        this.tableData = [];
        for (let item of response.docs) {
        this.tableData.push(item.data());
        }

        //Maintaing page no.
        this.pagination_clicked_count--;

        //Pop not required value in array
        this.pop_prev_startAt(this.firstInResponse);

        //Enable buttons again
        this.disable_prev = false;
        this.disable_next = false;
    }, error => {
        this.disable_prev = false;
    });
}

nextPage() {
    this.disable_next = true;
    this.firestore.collection('People', ref => ref
    .limit(5)
    .orderBy('timestamp', 'desc')
    .startAfter(this.lastInResponse)
    ).get()
    .subscribe(response => {

        if (!response.docs.length) {
        this.disable_next = true;
        return;
        }

        this.firstInResponse = response.docs[0];

        this.lastInResponse = response.docs[response.docs.length - 1];
        this.tableData = [];
        for (let item of response.docs) {
        this.tableData.push(item.data());
        }

        this.pagination_clicked_count++;

        this.push_prev_startAt(this.firstInResponse);

        this.disable_next = false;
    }, error => {
        this.disable_next = false;
    });
}

//Add document
push_prev_startAt(prev_first_doc) {
    this.prev_strt_at.push(prev_first_doc);
}

//Remove not required document 
pop_prev_startAt(prev_first_doc) {
    this.prev_strt_at.forEach(element => {
    if (prev_first_doc.data().id == element.data().id) {
        element = null;
    }
    });
}

//Return the Doc rem where previous page will startAt
get_prev_startAt() {
    if (this.prev_strt_at.length > (this.pagination_clicked_count + 1))
    this.prev_strt_at.splice(this.prev_strt_at.length - 2, this.prev_strt_at.length - 1);
    return this.prev_strt_at[this.pagination_clicked_count - 1];
}

这里最好的方法是什么？

如何使用准备好上市的数据表来处理大量数据？