primeng 表中的延迟加载

Question

我有一个带有 p-dropdown 和 p-table 的组件。当我在下拉列表中选择项目时，我想延迟加载此组件中 p 表中的数据。有可能吗？当我尝试时，我只对整个组件进行延迟加载。

https://stackblitz.com/edit/primeng-tablelazy-demo-lwb4no?file=src%2Fapp%2Fapp.component.ts

Answer 1

您提供的示例有两个问题：

1. 抛出错误，因为您的

   event

   参数 onChange 函数未定义。 要解决此问题，您需要像这样调用模板中的函数：

<p-dropdown
  [options]="['customers_a', 'customers_b', 'customers_c']"
  (onChange)="onChange($event)"
></p-dropdown>

（注意参数名称中的美元符号。您可以在 docs 中找到更多相关信息）

2. 您没有向

   loadCustomers

   方法提供延迟加载事件。相反，您从不具有所需属性的下拉列表中传递事件。

所以不要像这样调用

loadCustomers

方法：

    this.loadCustomers(event, this.selectedCustomers);

您可以调用表上的

reset

方法或手动从表中获取lazyLoad元数据。 为此，您需要引用组件类中的表。 这可以使用 ViewChield 装饰器进行存档。

选项 1：

  @ViewChild(Table)
  table: Table;

  onChange(event) {
    this.selectedCustomers = event.value;
    this.table.reset()
  }

选项2：

  @ViewChild(Table)
  table: Table;

  onChange(event) {
    this.selectedCustomers = event.value;
    this.loadCustomers(this.table.createLazyLoadMetadata(), this.selectedCustomers)
  }

Answer 2

我发现最简单的方法就是自己引发负载。

如果您有一个名为

onLazyLoad

的组件方法，它充当

onLazyLoad

回调：

onLazyLoad(event: LazyLoadEvent) { . . . }

<p-table
    (onLazyLoad)="onLazyLoad($event)"
</p-table>

您可以从表中请求一个事件，然后使用该事件调用您的回调：

triggerLazyLoad(): void {
  const lazyLoadEvent = this.commandTable.createLazyLoadMetadata();
  this.onLazyLoad(lazyLoadEvent);
}

现在，

createLazyLoadMetadata

没有技术记录，但它是公开的。这不是最好的解决方案，但似乎没有一个好方法来触发延迟加载以响应外部过滤器更改之类的情况。