排序primeng列答案

【问题标题】：Sorting primeng columns排序primeng列
【发布时间】：2019-03-02 06:21:37
【问题描述】：

我正在使用primeng 表，并且正在使用他们的切换方法来处理列。唯一的问题是，当您关闭并重新打开列时，它会将列返回到表的末尾。我想知道是否有人知道无论如何要对它们进行排序，以便列回到原来的位置

我尝试在我的 component.ts 文件中使用各种排序方法，但没有成功。

Here 是我在 PrimeNG 中使用的示例（可以在那里测试并查看代码）

【问题讨论】：

【解决方案1】：

示例中的列顺序由 selectedColumns 数组确定。默认情况下，在 MultiSelect 组件中，它会将任何更改附加到数组的末尾。因此，您应该在 MultiSelect 上的每个更改事件之后对其进行排序。添加事件处理程序 modelChange()

<p-multiSelect [options]="cols" [ngModel]="selectedColumns" 
            (ngModelChange)='modelChange($event)'
                optionLabel="header"
                        selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>

在你的组件 ts 文件中，

  modelChange(event) {
    console.log('change fired')
    this.selectedColumns = event;
    this.selectedColumns.sort(
      function compare(a, b) {
        if (a.field < b.field)
          return -1;
        if (a.field > b.field)
          return 1;
        return 0;
      }

    );
    console.log(this.selectedColumns);
  }
}

在此处查看演示：https://stackblitz.com/edit/angular7-template-fork-first-ow8wtw

【讨论】：