如何更新Angular材质的拖放数组?

I was trying the drag and drop of Angular material where I made the array as array of JSON. The problem is I want to update the pos key (of the JSON) with the value of event.currentIndex and modify the pos of other values also.

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;
  }

component.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>

初始清单

Initial

交换之后

swapping

当我尝试拖动第一个或最后一个值时,就会出现这种情况。

我需要对代码进行哪些更改?