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

Question

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

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

• 角 7.2.4
• 角/cdk 7.3.1
• ngrx-data 6.1.0-beta.3（Ngrx http 请求包装器）
• PrimeNG 7.0.5（用户界面框架）
• 接收器 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()函数中的更改。

Answer 1

只需像这样更新 app.template

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

似乎 p-table lasyload 不会在数据更改时触发，即使数据属性从 更改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;
      }
    }
  }

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

闪电战