如何动态更改 IgxGrid 的列索引？

Question

我需要在 IgxGrid 上应用用户设置。我正在尝试的是，每当用户重新排序列时，我都会将列索引保存在我的数据库中，并且下次用户打开同一个网格时；我需要在他之前保存的网格上显示相同的设置。但是当我尝试设置列索引时，它说索引属性没有设置器。如何实现动态更改列索引的功能？这是我想要做的，

for (var iterator = 0; iterator < gridSettings.ColumnSettings.length; iterator++) {          

      if (this.componentRef.columns != null) {
        for (let colIndex = 0; colIndex < this.componentRef.columns.length; colIndex++) {

          if (this.componentRef.columns[colIndex].field == gridSettings.ColumnSettings[iterator].Key) {    

            this.componentRef.columns[colIndex].width = gridSettings.ColumnSettings[iterator].Width;
            this.componentRef.columns[colIndex].index = gridSettings.ColumnSettings[iterator].Index;

            break;
          }
        }
      }

这是我遇到的错误，

ERROR 错误：未捕获（承诺中）：TypeError：无法设置属性 [object Object] 的索引，它只有一个 getter TypeError：不能 设置只有 getter 的 [object Object] 的属性索引

Answer 1

您是否将 igx-grid 列的初始渲染绑定到列设置？如果是，那么*ngFor 将使用它们在ColumnSettings 集合中保存的索引来呈现列。

<igx-column *ngFor="let column of gridSettings.ColumnSettings" [width]="column.width">
  ...
</igx-column>

不要将index 作为ColumnSettings 数组中对象的属性，而是根据索引对数组重新排序。然后根据igx-column 组件的visibleIndex 属性而不是index 属性重新排列ColumnSettings 数组。

没有索引设置器的原因是，当列的索引更改时，该列应该与目标索引处的列交换，或者目标之后的所有列的索引应该递增到源.索引设置器的行为变得更加复杂，并且会导致与固定列的更多不一致，因为在固定之后，数组中的索引不再由 UI 反映，因为列可能位于索引 5 上，但如果它被固定，然后它在网格的开头被冻结。