Ngx-Datatable - значение rowIndex неверно при сортировке столбца

Я использую 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);
  }

The property is updated fine as long as the column is not sorted.

Если я сортирую столбец, то rowIndex сохраняется в соответствии с исходным значением, а свойство не обновляется.

Любое решение для этого?

Спасибо


javascript angular ngx-datatable
person Luca Brasi    schedule 28.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я думаю, что это ошибка новичка в моем коде TS.

Я напрямую изменял объект строк, который, насколько я понимаю, является неизменным.

Вместо этого, если я сделаю следующее, изменив объект 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);
}
person Luca Brasi    schedule 29.04.2018