ion-reorder doesnt update UI correctly

92 Views Asked by At

I use IONIC and want to reorder an array of Objects which I display in a two-way Databinding. The array updates in the background, but the UI jumps back to the default state.

My template:

<ion-list class="ion-no-padding">
  <ion-reorder-group [disabled]="false" (ionItemReorder)="handlePositionReorder($event)">
    <ion-item class="dataItem align-items-start" *ngFor="let offerPosition of offerPositionsAttributes; index as i; trackBy: customTrackBy">
      <ion-input class="tdPos" [(ngModel)]="offerPositions[i].pos (input)="offerValChange($event, i)" type="text"></ion-input>
      <ion-col class="tdTitle">
        <b><ion-input [(ngModel)]="offerPositions[i].title (input)="offerValChange($event.target, i)"></ion-input></b>
        <ion-textarea type="text" autoGrow="true" [(ngModel)]="offerPositions[i].description" (input)="offerValChange($event.target, i)"></ion-textarea>
      </ion-col>
      <ion-input class="tdAmount" [(ngModel)]="offerPositions[i].amount" (input)="offerValChange($event.target, i)"></ion-input>
      <ion-input class="tdSinglePrice" [(ngModel)]="offerPositions[i].nettoPrice" (input)="offerValChange($event.target, i)"></ion-input>
      <ion-input class="tdTotalPrice" [(ngModel)]="offerPositions[i].totalPrice" (input)="offerValChange($event.target, i)"></ion-input>
      <span style="width: 6.5%;">
        <ion-button slot="end" shape="round" color="danger" (click)="onDeleteOfferPosition(i)">
          <ion-icon slot="icon-only" name="close-outline"></ion-icon>
        </ion-button>
      </span>
      <span style="width: 6.5%;">
        <ion-reorder>
        </ion-reorder>
      </span>
    </ion-item>
  </ion-reorder-group>
</ion-list>

My .ts file:

handlePositionReorder(event) {
  const itemMove = this.offerPositions.splice(event.detail.from, 1)[0];
  const itemAttributes = this.offerPositionsAttributes.splice(event.detail.from, 1)[0];

  this.offerPositions.splice(event.detail.to, 0, itemMove);
  this.offerPositionsAttributes.splice(event.detail.to, 0, itemAttributes);
  this.offerPositions = this.offerPositions;
  this.offerPositionsAttributes = this.offerPositionsAttributes;
  event.detail.complete();
}

I tried different ways of the event.detail.complete(); method.

0

There are 0 best solutions below