具有冻结列功能的复选框选择导致 primeng 内有多个复选框列 table

Question

我正在我的 angular 项目中实施 Primeng Table 的以下两个功能。

1. Checkbox selection。向下滚动到名为 Checkbox Selection.
的部分
2. Frozen Columns。向下滚动到名为 Frozen Columns.
的部分

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

要求的行为：应该始终有一个复选框列，无论列是否被冻结。

这是问题的 Stackblitz 最小再现。

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

Answer 1

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

组件

  this.scrollableCols = [
            { field: 'checkBox', header: 'checkBox' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: 'color', header: 'Color' },
            { field: 'year', header: 'Year' },
            { field: 'brand', header: 'Brand' },
            { field: '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>

in here ng-container *ngIf="col.field === 'checkBox' else baseTemp" we check for columns with field checkbox then we add the p-tableCheckbox component

demo