第一列在冻结和重复中重复解冻Primeng表中的表 [英] First column repeating in both froze & unfroze table in Primeng table

问题描述

我正在一个项目中，我将 PrimeNg 表与froze&取消冻结列属性，并且在使用 * NgFor 创建的常规列中可以正常工作，但是如果我添加不包含 * NgFor 的新列，则在冻结&冻结表.

I am working on one project where I used PrimeNg table with froze & unfroze column property and its working fine in normal column creating with *NgFor but if I add new column without *NgFor its repeating in both froze & unfroze table.

如何解决此问题，因为我只希望该列位于冻结列而不是冻结列上.

How to overcome this issue as I want that column only on froze column not on unfroze column.

我的代码:

<ng-template pTemplate="header" let-columns>
    <tr>
      <th>All</th>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td>
                <p-tableCheckbox
                  [value]="rowData"
                  [attr.disabled]="
                    rowData.setupType === 'No Action' &&
                    rowData.currentStatus === 'INACTIVE'
                      ? 'disabled'
                      : null
                  "
                ></p-tableCheckbox>
              </td>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>

列重复问题:

如何克服这个问题?

如果可能，请在 PrimeNg 表中为我提供指导.

Guide me if its possible in PrimeNg table.

推荐答案

您需要使用模板 frozenheader

<ng-template pTemplate="frozenheader" let-columns>
        <tr>
            <th>All</th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>

和冻结主体

<ng-template pTemplate="frozenbody" let-rowData let-columns="columns">
        <tr>
            <td style="text-align: center">
                <p-tableCheckbox [value]="rowData" [attr.disabled]="
                    rowData.setupType === 'No Action' &&
                    rowData.currentStatus === 'INACTIVE'
                      ? 'disabled'
                      : null
                  "></p-tableCheckbox>
            </td>
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>

演示此处

这篇关于第一列在冻结和重复中重复解冻Primeng表中的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！