Question

我的阵列很大（例如30,000个项目）。我使用grpc-web将其作为流获取。

我从grpc.client（）获取数据，并将其推入数组，然后使用*ngFor显示该数组，但这有点慢而且很麻烦。我还有其他方法可以显示数据吗？我曾考虑过使用Observable数组，然后使用async管道，但我不太了解如何做，对它有什么帮助。

这是代码：

book.component.ts

queryBooks() {
const client = grpc.client(BookService.QueryBooks, {
  host: host,
});
client.onHeaders((headers: grpc.Metadata) => {
  // console.log("queryBooks.onHeaders", headers);
});
client.onMessage((message: Book) => {
 this.books.push(message.toObject())
});
client.onEnd((code: grpc.Code, msg: string, trailers: grpc.Metadata) => {
  trailers :', trailers);
});
client.start();
client.send(queryBooksRequest);

}

我不确定可观察对象是否可以解决问题，但是它非常落后。

Answer 1

按照@Ploppy的建议，您可以使用角度材料cdk中的数据表。

这将限制dom中当前的元素数量，并显着加快渲染速度。

Answer 2

我想建议使用分页，如果无法在服务器端使用分页，则可以在客户端上实现。对于3万个问题，即使不是角度问题，也会生成太多html元素。

Answer 3

您可以使用PrimeNG来使用其组件，有一种解决了您的问题，只滚动显示的加载数据。

对于表格：https://www.primefaces.org/primeng/#/table/scroll

“简单”数据：https://www.primefaces.org/primeng/#/virtualscroller

要使用PrimeNG：https://alligator.io/angular/primeng/

很大的角度数组

3 个答案: