PrimeNG 13 冻结列在较小的屏幕尺寸上破裂，并且仅隐藏冻结列时观察到异常

Question

我有一个 PrimeNG 数据表，如下所示，最初加载了冻结列：

当我尝试隐藏其中一个冻结列时，表不会重新调整自身以容纳空白区域中剩余的冻结列，而是留下一个空白区域，如下所示：

我尝试隐藏的冻结列越多，空白空间就会扩大。

观察到的另一个异常是当我尝试调整屏幕尺寸时，属性responsiveLayout =“scroll”不起作用，并且我的表格中断如下：

下面是 HTML 代码：

<div class="col-12">
        <p-table #dt
                 [columns]="selectionService.selectedScrollableColumns"
                 [loading]="loading"
                 [value]="selectionService?.listOfRetrievedDepositValuations"
                 (onHeaderCheckboxToggle)="onClickHeaderCheckbox()"
                 (onRowSelect)="onRowSelect()" (onRowUnselect)="onRowUnselect()"
                 (onFilter)="updateGroupingTotalsAfterFilters($event)"
                 responsiveLayout="scroll" scrollDirection="both"
                 [paginator]="true" [rows]="25" [scrollable]="true"
                 [(selection)]="selectionService.selectedDepositValuation"
                 [resizableColumns]="false"  stateStorage="session" stateKey="{{userLoggedInWithTenant}}-valuation-selection"
                 dataKey="uid" 
                 styleClass="sticky-datatable p-datatable-striped">
            <ng-template pTemplate="header" let-columns *transloco="let t">
                <tr>
                    <ng-container *ngFor="let col of columns; let colIndex = index">
                        <th *ngIf="col.field === 'checkbox'" [style]="getColumnWidth(col.type)"
                            pResizableColumn [id]="'headerCheckbox'+colIndex" pFrozenColumn [frozen]="col.isFrozenColumn">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th *ngIf="col.field !== 'checkbox'" pResizableColumn pFrozenColumn [frozen]="col.isFrozenColumn" [pSortableColumn]="col.field"  style="text-align:center ;" [style]="getColumnWidth(col.type)"
                            [pTooltip]="col.header" [id]="'header'+colIndex"  [ngClass]="col?.class">
                            <div class="text-overflow-ellipsis p-fluid">
                                {{col.header}}
                              <p-sortIcon [field]="col.field"></p-sortIcon> 
                            </div>
                        </th>
                    </ng-container>

                </tr>
             
                <tr>
                    <ng-container *ngFor="let col of columns; let colIndex = index">
                        <th *ngIf="col.field === 'checkbox'" [style]="getColumnWidth(col.type)" 
                             pFrozenColumn [frozen]="col.isFrozenColumn">
                        </th>
                        <th class="filter-header-height" [ngSwitch]="col.type" *ngIf="col.field!=='checkbox'"  style="text-align:center;"   pFrozenColumn [frozen]="col?.isFrozenColumn" [style]="getColumnWidth(col.type)"
                            [id]="'filterHeader' + colIndex">
                            <div class="p-fluid">
                                <p-columnFilter type="text" [field]="col.field" [matchMode]="'contains'" *ngSwitchCase="'deposit'"></p-columnFilter>
                                <p-columnFilter *ngSwitchCase="'code'" [field]="col.field" matchMode="in" [showMenu]="false">
                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                        <p-multiSelect
                                            [options]="getProperty(col.options)" [placeholder]="t('common.choose')"
                                            [emptyFilterMessage]="t('common.empty-message')" [ngModel]="dt.filters[col.field]?.value"
                                            (onChange)="filter($event.value, col.field, 'in')" [panelStyle]="{width:'12em'}" appendTo="body">
                                        </p-multiSelect>
                                    </ng-template>
                                </p-columnFilter>
                                <p-columnFilter *ngSwitchCase="'currency'" [field]="col.field" matchMode="in" [showMenu]="false">
                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                        <p-multiSelect
                                            [options]="getProperty(col.options)" [placeholder]="t('common.choose')"
                                            [emptyFilterMessage]="t('common.empty-message')" [ngModel]="dt.filters[col.field]?.value"
                                            (onChange)="filter($event.value, col.field, 'in')" [panelStyle]="{width:'12em'}" appendTo="body">
                                        </p-multiSelect>
                                    </ng-template>
                                </p-columnFilter>

                                <ng-bdi-number-filter [width]="100" [decimalPlaces]="2" *ngSwitchCase="'number'"
                                                      [value]="dt.filters[col.field.toString()] ? dt.filters[col.field.toString()].value : null"
                                                      (onChange)="dt.filter($event, col.field.toString(), 'number_range')">
                                </ng-bdi-number-filter>

                                <ng-bdi-number-filter [width]="100" [decimalPlaces]="0" *ngSwitchCase="'value'"
                                                      [value]="dt.filters[col.field] ? dt.filters[col.field].value : null"
                                                      (onChange)="dt.filter($event, col.field, 'number_range')">
                                </ng-bdi-number-filter>
                            </div>
                        </th>
                    </ng-container>


                </tr>
            
            </ng-template>
              <ng-template pTemplate="body" let-deposit let-columns="columns">
                <tr [pSelectableRow]="deposit">
                    <ng-container *ngFor="let col of columns">
                        <td *ngIf="col.field==='checkbox'" pFrozenColumn [frozen]="col?.isFrozenColumn" [style]="getColumnWidth(col.type)" >
                            <p-tableCheckbox [value]="deposit"></p-tableCheckbox>
                        </td>

                        <td *ngIf="col.field!=='checkbox'"  pFrozenColumn [frozen]="col?.isFrozenColumn" [style]="getColumnWidth(col.type)"  [ngClass]="col.scrollable === true ? 'non-frozen' : null">

                            <div *ngIf="col.type==='deposit'" class="text-left p-fluid">
                                {{resolveRowData(deposit, col.field)}} </div>

                            <div *ngIf="col.type==='code'" class="text-center p-fluid">
                                {{resolveRowData(deposit, col.field)}} </div>

                            <div *ngIf="col.type==='currency'" class="text-center p-fluid">
                                <app-currency-flag [isoCode]="resolveRowData(deposit, col.field)"></app-currency-flag>
                            </div>

                            <div *ngIf="col.type==='number'" [style.color]="getColor(deposit[col.field])"
                                 class="text-right p-fluid">
                                <em [ngClass]="determinePerformance(resolveRowData(deposit,col.field))"
                                    *ngIf="col.field==='performance'"></em>

                                {{resolveRowData(deposit, col.field) | number : '1.2-2'}}
                            </div>

                            <div *ngIf="col.type==='value'" [style.color]="getColor(deposit[col.field])"
                                 class="text-right p-fluid"> {{resolveRowData(deposit, col.field) | number : '1.0-0'}}
                            </div>
                        </td>
                    </ng-container>
                </tr>
            </ng-template>
          
          <ng-template pTemplate="footer" let-columns>
                <tr>
                    <ng-container *ngFor="let col of columns">
                        <td [style]="getColumnWidth(col.type)" pFrozenColumn [frozen]="col?.isFrozenColumn">
                            <span *ngIf="col.field==='depositReferenceCurrencyNegativeValue'"
                                 class="text-right">
                                {{totalNegativeReferenceCurrencyValue | number : '1.0-0'}} </span>

                            <span *ngIf="col.field==='depositReferenceCurrencyPositiveValue' "
                                 class="text-right">
                                {{totalPositiveReferenceCurrencyValue | number : '1.0-0'}} </span>

                            <span *ngIf="col.field==='depositReferenceCurrencyValue' "
                                 class="text-right">
                                {{totalReferenceCurrencyValue | number : '1.0-0'}} </span>

                            <span class="text-right"
                                 *ngIf="col.field!=='depositReferenceCurrencyValue' &&
                            col.field!=='depositReferenceCurrencyPositiveValue' && col.field!=='depositReferenceCurrencyNegativeValue' ">
                                &nbsp;
                        </span>
                        </td>
                    </ng-container>
                </tr>
            </ng-template>
            

            <ng-template pTemplate="emptymessage" >
                <tr>
                    <td [attr.colspan]="selectionService.frozenColumns.length" *transloco="let t">
                        {{ t('common.table.empty') }}

                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="summary">
                <tr>
                    <td colspan="3" >
                        <strong style="float:left">#: {{dt?.totalRecords}}</strong>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

以下是过滤所选列的代码：

 displayAndHideColumns(event: any): void {
        this.selectionService.selectedColumns.forEach(x=>{
        if(this.selectionService.frozenColumns.find(col => x.field===col.field)){
        x.isFrozenColumn=true;
        }
        else{
        x.isFrozenColumn=false;
        }
        })
        const selectedScrollableColumns = [...this.selectionService.selectedColumns];
        this.selectionService.selectedScrollableColumns = [];
        this.selectionService.selectedColumns.forEach(x=>{
            this.selectionService.selectedScrollableColumns.push(x);
        })
        this.selectionService.selectedScrollableColumns.sort((a, b) => a.order - b.order);
        this.loadFreezeTableHeaders();
    }

对于以上两个问题有什么建议吗？