With my code below I was able to delete an object from the array based on the index and it will return the remaining objects

My questios is how do I get the deleted objects (not the remaining one , but the object I deleted) and store it on a separate array . Any idea guys ? Thanks.

I wanna keep track of the deleted objects.

#sample data - files

[
    {
        "id": 290,
        "size": 50461,
    },
    {
        "id": 291,
        "size": 50461,
    },
    {
        "id": 290,
        "size": 50461,
    },
]

#ts code

 removeFile(files: any, index: number) {
    return files.splice(index, 1);
  }

#html

<div fxLayout="column" style="margin-left:9.2vw" *ngIf="files.length > 0">
          <div *ngFor="let item of files;let i=index">
            <div fxLayout="row" style="padding-bottom:8px" layout-wrap>
              <mat-icon style="font-size: 20px;" color="primary">description</mat-icon>
              <span   style="font-size: 14px;" matTooltip="{{item.name}}">{{ item.name | truncatedotted:[25]
                }}</span>&nbsp;
              <span style="font-size: 12px;" >{{ item.size/1024 | number:'1.0-0' }} kb</span>
              <span style="flex:1 1"></span>
              <span  (click)="removeFile(files, i)" style="color:indianred;margin-right:10px">
                close
              </span>
            </div>
          </div>

CodePudding user response：

Have giving the javascript version, so splice will return the spliced element, just push it to an array variable and thats it!

const arr = [
    {
        "id": 290,
        "size": 50461,
    },
    {
        "id": 291,
        "size": 50461,
    },
    {
        "id": 290,
        "size": 50461,
    },
]
let deletedOnes.push( = []
 function removeFile(files, index) {
    return files.splice(index, 1);
  }
  deletedOnes.push(removeFile(arr, 1));
  console.log('original', arr, 'deletedOnes', deletedOnes);