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

Question

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

1. 复选框选择。向下滚动到名为Checkbox Selection的部分。
2. 冻结列。向下滚动到名为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>

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

演示