angular - PrimeNG 使用异步管道延迟加载数据

问题描述

我需要在 PrimeNG 数据表中显示大量数据（400.000 条记录）。为此，我需要一个延迟加载表，因为您无法一次将所有数据加载到表中（这会使您的浏览器崩溃）。

为了创建表，我使用以下技术：

角 7.2.4
角/cdk 7.3.1
ngrx-data 6.1.0-beta.3（Ngrx http 请求包装器）
PrimeNG 7.0.5（用户界面框架）
Rxjs 6.4.0

我想要什么

我正在尝试创建一个延迟加载表，如PrimeNG 文档中所示，其中数据从服务器加载并显示在表中。当用户导航到下一个选项卡时，将加载并显示下一个 x 数量的数据。

唯一的区别是我先从服务器获取所有数据，然后再将其提供给表组件。这样，我只需要从数据源中挑选某些数据并将其显示给用户。

问题

在尝试实现它时，我遇到了一个问题，即在从服务器加载数据之前的阶段，该(onLazyLoad)函数只被调用一次。onInit()

我可以通过添加来撤消此操作[lazyLoadOnInit]="false"，但这会导致根本不调用延迟加载函数。我希望我可以通过在[totalRecords]加载数据时更改属性来触发加载功能，但这也不会触发该功能。

我在PrimeNG p-table 代码中找不到任何其他可用于触发的函数(onLazyLoad)，还是我遗漏了什么？

代码

public ngOnInit(): void {
  this.cars$ = this.carService.entities$; // = []
  this.carService.getAll(); // = [Car, Car, Car, Car] OR []
}

this.carService.entities$有一个默认值，[]并用函数的结果填充（如果没有结果getAll()也可能是这样）[]

我在StackBlitz中重现了我的问题。在这里你可以看到数据从不显示，因为(onLazyLoad)只有第一次调用，当数据为空时。

请注意，我正在使用Angular Async 管道将数据传递到我的组件中。这意味着我需要检查ngOnChanges()函数中的更改。

标签： angulartypescriptlazy-loadingprimengprimeng-datatable

只需像这样更新 app.template

<ng-container *ngIf="cars$ | async as data">
  <table-component [data]="data"></table-component>
</ng-container>

即使数据属性undefined从object(arry)

堆栈闪电战

更新

没有异步管道获取数据

  public ngOnInit(): void {
    this.carService.getAll().subscribe(data => this.data = data);
  }

ngOnChanges 方法

  public ngOnChanges(change: SimpleChanges): void {
    if(change.data) {
      if (change.data.currentValue) {
      this.datasource = change.data.currentValue;
      this.totalRecords = Array.isArray(change.data.currentValue) ? change.data.currentValue.length : 0;
      this.cars = this.datasource.slice(0, 10); // row number
      this.loading = false;
      }
    }
  }

检查这篇文章解释了如何使用异步管道和变更检测

堆栈闪电战

angular - PrimeNG 使用异步管道延迟加载数据

问题描述

解决方案

推荐阅读