Ngx-Datatable - 排序列时rowIndex值不正确

Question

我正在使用ngx-datatable，它运行良好但只是面临以下行为的问题：

• 我有一个切换开关，可在切换时更改列属性：

• 要更改属性值，我在模板和组件中使用以下代码：

<ngx-datatable-column name="Activation Status" prop="activation_status">
  <ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-rowIndex="rowIndex">
    <mat-slide-toggle *ngIf="value === 'ACTIVATED'" color="accent" checked="true" disabled="true">
      {{value}}
    </mat-slide-toggle>
    <mat-slide-toggle *ngIf="value === 'PENDING'" color="accent" checked="false" (change)="onToggle(rowIndex)">
      {{value}}
    </mat-slide-toggle>
  </ng-template>
</ngx-datatable-column>

    onToggle(rowIndex) {
    setTimeout(() => {
      this.rows[rowIndex].activation_status = 'ACTIVATED';
      this.rows = [...this.rows];
    }, 100);
    console.log(rowIndex);
  }

只要列未排序，属性就会更新。

如果我对列进行排序，则rowIndex将按原始值保留，并且不会更新该属性。

对此有何解决方案？

由于

Answer 1

好的，我认为这是我的TS代码中的一个noob错误。

我正在直接修改rows对象，根据我的理解，这是一个不可变的。

因此，如果我通过修改let-row对象来执行以下操作，那么它可以工作：

<ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-rowIndex="rowIndex">
  <mat-slide-toggle *ngIf="value=='ACTIVATED'" color="accent" checked="true" disabled="true">
    {{value}}
  </mat-slide-toggle>
  <mat-slide-toggle *ngIf="value=='PENDING'" color="accent" checked="false" (change)="onToggle(row)">
    {{value}}
  </mat-slide-toggle>
</ng-template>

onToggle(row: any) {
   setTimeout(() => {
   row.activation_status = 'ACTIVATED';
 }, 200);
   console.log(row);
}