Первый столбец повторяется как в таблице «Заморозка, так и размораживание» в таблице Применг

Question

Я работаю над одним проектом, в котором я использовал таблицу PrimeNg со свойством столбца froze & unfroze и работал нормально в обычном столбце, создавая с *NgFor, но если я добавляю новый столбец без *NgFor, его повторяется в обоих случаях: разморозить стол.

Как преодолеть эту проблему, так как я хочу, чтобы этот столбец был только на замороженном столбце, а не на незамерзающем столбце.

Мой код:

<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.

Answer 1

Вам нужно использовать шаблон frozenheader

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

и frozenbody

<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>

Демо здесь