Ngx-Datatable - 排序列时 rowIndex 值不正确-Java 学习之路

我正在使用 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 将按原始值保留，并且不会更新该属性。

对此有何解决方案？

谢谢

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);
}

回复于 2024-04-27T11:09:38+08:00

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

1 回答

相关问题