Как обновить массив перетаскивания Angular материала?

Question

Я пытался перетащить Angular материала, где я сделал массив как массив JSON. Проблема в том, что я хочу обновить ключ pos (из JSON) значением event.currentIndex, а также изменить положение других значений.

component.ts

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

temp: number;

movies = [
    {name: 'Episode I - The Phantom Menace', pos: 0},
    {name:'Episode II - Attack of the Clones', pos: 1},
    {name: 'Episode III - Revenge of the Sith', pos: 2},
    {name: 'Episode IV - A New Hope', pos: 3}
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
    console.log(this.movies[event.currentIndex]);
    console.log(this.movies);
    this.temp = event.previousIndex;
    event.previousIndex = event.currentIndex;
    event.currentIndex = this.temp;
    this.movies[event.currentIndex].pos = event.currentIndex;
    this.movies[event.previousIndex].pos = event.previousIndex;
  }

компонент. html

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies;" cdkDrag>
        {{movie.name}} {{movie.pos}}
    </div>
</div>

Исходный список

После замены

Этот тип сценария возникает, когда я пытаюсь перетащить 1-е или последнее значение.

Какие изменения мне требуются в моем коде?