具有冻结列功能的复选框选择导致在primng表中有多个复选框列

问题描述

我正在我的有角项目中实现Primeng Table的以下两个功能。

1. Checkbox selection。向下滚动到名为复选框选择的部分。
2. Frozen Columns。向下滚动到名为冻结列的部分。

问题：冻结列时，复选框列同时出现在“冻结列”和“可滚动列”中。

必需的行为：无论列是否冻结，都应该始终有一个CheckBox列。

这是Stackblitz对问题的最小复制。

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

解决方法

我不太确定为什么会发生这种情况，我们需要查看源以找出答案，但是您可以通过为列添加一个额外的字段来解决它。

组件

  this.scrollableCols = [
            { field: 'checkBox',header: 'checkBox' },{ field: 'year',header: 'Year' },{ field: 'brand',header: 'Brand' },{ field: 'color',header: 'Color' },header: 'Color' }
        ];

模板

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars1" [scrollable]="true"
    scrollHeight="200px" frozenWidth="300px">
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col *ngFor="let col of columns" style="width:300px;">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <!-- <th>
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th> -->
            <th *ngFor="let col of columns" style="height:35px">

                <ng-container *ngIf="col.field === 'checkBox' else baseTemp">
                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                </ng-container>

                <ng-template #baseTemp>
                    {{col.header}}
                </ng-template>


            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>

            <!-- <td>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
           -->
            <td *ngFor="let col of columns" style="height:35px">

                <ng-container *ngIf="col.field === 'checkBox' else baseTemp">
                    <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
                </ng-container>

                <ng-template #baseTemp>
                    {{rowData[col.field]}}
                </ng-template>

            </td>
        </tr>
    </ng-template>
</p-table>

在这里ng-container *ngIf="col.field === 'checkBox' else baseTemp"中，我们检查了带有字段复选框的列，然后添加了p-tableCheckbox组件

demo ??