时间戳

首页 > 解决方案 > 在 ngx-datatable angular 4 中使用 *ngIf 隐藏/显示列时，不维护表列的拖放顺序

angular - 在 ngx-datatable angular 4 中使用 *ngIf 隐藏/显示列时，不维护表列的拖放顺序

问题描述

我们试图实现的是，我们希望在刷新页面时保持列的拖放顺序。拖放后，我们将当前列顺序存储在 localStorage 中。下次页面刷新时，我们将获取该列顺序并将其传递给 ngx-datatable。- 这工作正常

我们还使用 *ngIf 来显示/隐藏表格中的列。- 这会导致问题（也许，我不确定）。

以下是我们面临问题的场景：

  1. 拖放列
  2. 显示/隐藏列

在第 2 步之后，我们在第 1 步得到的顺序在表格中没有维护，下面是 gif。

GIF 链接显示问题

<ngx-datatable class="" [columnMode]="'force'" [headerHeight]="70" [footerHeight]="50" [rowHeight]="30" [scrollbarV]="true (activate)="onActivate($event)" (select)="onSelect($event,row)" [scrollbarH]="true" [selectionType]="'single'" [rows]="rows">

<span *ngFor=" let col of dynamicCol;let i = index">
    <ngx-datatable-column *ngIf="check_show_hide(i,col) " name="{{col}}" prop="{{col}}" [headerClass]="getIsShowColName" class="draggable">
        <ng-template *ngIf="customFilterData[i]" let-sort="sortFn" let-column="column" height="200"  ngx-datatable-header-template>

            <label  class="draggable" draggable="true"  (click)="sort()" style="height:10px;cursor:pointer">{{customFilterData[i].name}}</label>
            <br>
            <input type='text' style='width:100%;height:30px;' placeholder='Filter..' (keyup)='updateFilterNew(customFilterData[i])'
             [(ngModel)]="customFilterData[i].value" [hidden]="customFilterData[i].name === 'Serial_No'"/>
        </ng-template>
    </ngx-datatable-column>
</span> </ngx-datatable>

在上面的代码中，dynamicCol 包含以下格式的列：

dynamicCol = ['FirstName', 'MiddleInitial', ...]

我们headerClass='getIsShowColName'用于获取列的当前顺序并将其存储在localStorage.

注意： *ngIf="customFilterData[i]"用于避免控制台中的错误，因为我们正在使用 -customFilterData[i].name和customFilterData[i].value

我们需要一个解决方案来维护隐藏/显示功能之后的列顺序。提前致谢

标签： angularngx-datatable

解决方案

推荐阅读