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.