当行在 Angular 中动态呈现时，如何将冻结列添加到 primeNG [英] How to add frozen columns to primeNG when rows are rendering dynamically in Angular

问题描述

我正在寻求帮助，以便在我的primeng 表中添加冻结列功能，其中列和行是动态呈现的.

我确实有一个配置(isPK:true)，它来自我想要制作冻结列的数据.

我已尝试遵循 stackblitz，但找不到与 PrimeNG 文档中给出的示例相匹配的解决方案

谢谢@Owen 的回答，但现在如果我尝试在 HTML 本身中添加一个额外的列，它会像这样翻倍，

解决方案

您应该按照 模板 部分:

<块引用>

frozenheader:冻结边thead元素的内容.

<块引用>

frozenbody:冻结边tbody元素的内容.

这是一个有效的示例.表体看起来很奇怪，但由于您使用的是动态列，因此列和数据之间必须匹配.

像这个示例，用于文档中的动态列.>

I was looking for help to add the frozen columns feature in my primeng table where the columns and rows are dynamically rendered.

I do have a config( isPK: true) that came from data on which I want to make frozen columns.

I have tried following stackblitz but I cannot found a solution to match the example given in the documentation of PrimeNG

Thanks, @Owen for the answer but now If I try to add an extra column in the HTML itself it is getting doubled like this,

https://stackblitz.com/edit/primeng-tablescroll-demo-jvmrfs

解决方案

You should use templating for frozen data as described in documentation in Templates section:

frozenheader: Content of the thead element in frozen side.

frozenbody: Content of the tbody element in frozen side.

Here is a working example. Table body looks weird but because you are using dynamic columns, there must be a match between columns and data.

Like this example for Dynamic columns from documentation.

这篇关于当行在 Angular 中动态呈现时，如何将冻结列添加到 primeNG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！