如何获取对象数组中被删除的对象并存储到单独数组？

我已经通过代码实现了根据索引从对象数组中删除元素，当前代码返回剩余对象，但我需要获取被删除的对象（而非剩余对象），并将其存储到单独数组中以追踪删除记录，请问该如何实现？

示例数据 - files #

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

现有TypeScript代码 #

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 class="primary-color" style="font-size: 14px;" matTooltip="{{item.name}}">{{ item.name | truncatedotted:[25] }}</span>&nbsp;
            <span style="font-size: 12px;" class="secondary-text">{{ item.size/1024 | number:'1.0-0' }} kb</span>
            <span style="flex:1 1"></span>
            <span class="material-icons remove-file" (click)="removeFile(files, i)" style="color:indianred;margin-right:10px">
                close
            </span>
        </div>
    </div>
</div>

步骤1：新增存储删除记录的数组 #

在组件类中定义一个数组，专门用来保存被删除的文件对象：

// 组件类内定义
deletedFiles: any[] = [];

步骤2：修改删除方法，捕获并存储被删除对象 #

Array.splice()方法本身会返回被删除元素组成的数组，你可以直接取出其中的元素（因为每次只删1个，所以取索引0的元素），将其存入删除记录数组：

removeFile(index: number) {
    // 直接操作组件内的files数组，无需传入
    const deletedItem = this.files.splice(index, 1)[0];
    // 将被删除对象存入记录数组
    this.deletedFiles.push(deletedItem);
    // 可选：如果需要返回被删除对象，也可以return
    return deletedItem;
}

步骤3：调整HTML中的调用逻辑 #

不需要再把files数组传入方法，直接传递索引即可，更符合Angular组件的使用习惯：

<span class="material-icons remove-file" (click)="removeFile(i)" style="color:indianred;margin-right:10px">
    close
</span>

补充说明 #

• 如果你需要严格的类型约束，建议把any替换为具体的文件类型，比如定义interface FileItem { id: number; size: number; name?: string; }，然后将files和deletedFiles的类型设为FileItem[]。
• 后续可以通过deletedFiles数组查看所有被删除的文件记录，用于日志展示、恢复操作等场景。

内容的提问来源于stack exchange，提问作者Tim Launders