angular - 当我使用它来隐藏表列时，如何在多选 PrimeNG 中保持顺序？

Question

我正在使用多选 PrimeNG 来显示或隐藏我的 ptable 的列，它可以很好地隐藏列，但是当我将它们显示回来时，它们会出现并附加到表的最后一个，因此这破坏了表列的顺序，因为我认为多选创建一个列数组来显示或隐藏它在隐藏时弹出并添加回数组，因此它终于出现了。

Answer 1

您可以为列添加唯一键，然后在更改过滤器时可以根据您的唯一键进行排序。

在 ts:

cols = [
      { field: 'name', header: 'Name', key: 1 },
      { field: 'type', header: 'Type', key: 1 },
      { field: 'description', header: 'Description', key: 3 },
      { field: 'created_on', header: 'Created on', key: 4 }
    ]

private _selectedColumns: any;

@Input('selectedColumns')
set selectedColumns(selectedColumns: any) {
  this._selectedColumns = selectedColumns;
  this._selectedColumns.sort((a, b) => a.key- b.key)
}

get selectedColumns(): any { return this._selectedColumns; }

在 html 模板中:

<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"defaultLabel="Column Options">
</p-multiSelect>