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

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

0 голосов
/ 28 апреля 2018

Я использую ngx-datatable, который прекрасно работает, но сталкивается с проблемой следующего поведения:

  • У меня есть тумблер, который изменяет свойство столбца при переключении:

enter image description here

  • Чтобы изменить значение свойства, я использую приведенный ниже код в шаблоне и компоненте: 
<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 Ответ

0 голосов
/ 29 апреля 2018

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

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

Так что вместо этого, если я сделаю следующее, изменив объект 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);
}
...