【问题标题】:PrimeNG 9 : Creating a new page or deleting an existing page in a paginated p-table - How?PrimeNG 9:在分页的 p 表中创建新页面或删除现有页面 - 如何?
【发布时间】:2021-10-09 15:09:23
【问题描述】:

好的,所以我正在使用 PrimeNG 9 创建这个可重复使用的表。

<p-table [paginator]="true" [rows]="10" dataKey="id" [value]="rows">

除了 2 个因素外,该表对我来说很好。

  1. 当有 10 行时,只有 1 页。但是当我以编程方式将新行添加到行列表中时,第 11 项必须出现在分页器的第 2 页中,但新页面没有创建或显示在分页器 n 中,因此看不到。 (P.S.- Row 被添加到表格的值列表中,但没有创建页面来查看它)
  2. 当有 11 行,并且存在 2 页(10 + 1 行)并且第 11 项(第 2 页)被删除时,该页没有被删除,我不知道如何以编程方式删除该页。 (P.S.-该项目已从表中删除。只是页面没有)。

在这两种情况下,table.reset() 都有效(table 是@viewchild),但页面排序、过滤器和其他配置都丢失了。

有没有一种方法可以控制分页器中页面的创建或删除,因为它不会自动发生?或任何其他解决方法?

提前致谢。


找到解决方案:

数组的更新应该发生在与表格相同的组件中,以便分页部分也重新呈现。在其他地方(服务或父组件)更新行数组数据并没有触发分页器中的更改。

【问题讨论】:

    标签: primeng angular10 paginator primeng-table


    【解决方案1】:
    Every time you do crud operation
    Clone or Delete
    you need to assign the updated values to Array which is used to populate values in the table 
    **[value] = new Array values.**
    
    For instance :
    1.After deleting the selected product 
    deleteSelectedProducts() {
           // will delete selected product 
            });
        }
    
    2.Need to call the api to get updated product list
    and assign that array list to the table **value property**.
    **[value] = new Array values.**
    

    【讨论】:

    • 谢谢 Inder.. 是的,我也在做同样的事情。我正在将带有行数据的数组传递给发生该过程的另一个服务。在删除已删除行或添加新行的位置创建一个新数组实例,然后将其分配给传递的引用。这些项目反映在表值中。这里没有问题。只是分页部分没有与值一起更新。表格下方分页部分的数字不变。
    • 我检查了代码,我注意到它的数组被传递给子组件以填充表,并且 CRUD 操作发生在子组件内。执行 CRUD 操作后,更新的数组列表未分配或传递给子组件表。所以一旦表格得到更新的列表问题就解决了!!!
    • 没有。数据从父组件发送到带有表格的子组件。然后,孩子将数据发送到处理数据的服务。在这种情况下,通过添加或删除行来创建一个新数组。这会按预期更改表格内容。但是分页部分没有改变。现在我有一个解决方案,你的想法帮助了我。
    猜你喜欢
    • 2019-01-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多