primeng 中的延迟加载 table

Question

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

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

Answer 1

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

抛出错误，因为您的 event 参数 onChange 函数未定义。要解决此问题，您需要像这样调用模板中的函数：

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

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

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

所以不要像这样调用 loadCustomers 方法：

    this.loadCustomers(event, this.selectedCustomers);

您可以在 table 上调用 reset 方法或从 table 手动获取 lazyLoad 元数据。为此，您需要在组件 class 中引用 table。这可以用 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)
  }

primeng 中的延迟加载 table

Lazy loading in primeng table

primeng

angular