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

Question

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

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

Angular 7.2.4

Angular/cdk 7.3.1

ngrx-data 6.1.0-beta.3 (Ngrx http 请求包装器)

PrimeNG 7.0.5 (UI 框架)

Rxjs 6.4.0

我要什么

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

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

问题

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

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

我在 PrimeNG p-table code 中找不到任何其他功能我可以用来触发 (onLazyLoad) ，或者我错过了什么？

代码

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

this.carService.entities$有一个默认值 []并填充 getAll() 的结果函数(如果没有结果也可以是 [])

我在 a StackBlitz 中重现了我的问题.在这里您可以看到数据从未显示，因为 (onLazyLoad)仅在数据为空时第一次调用。

请注意，我使用的是 Angular Async pipe用于将数据传递到我的组件中。这意味着我需要检查 ngOnChanges() 中的更改功能。

Answer 1

只需像这样更新 app.template

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

即使数据属性从 undefined 更改，似乎 p-table lasyload 也不会在数据更改时触发 🙄🙄至 object(arry)
stackblitz🚀🚀

更新

没有异步管道
获取数据

  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;
      }
    }
  }

check this article explains how to use async pipe and change detection

stackblitz 🚀🚀