使用角度附近的删除按钮选择多个文件

Question

简介：我有一个表格，其中的一列包含一个选项，用于选择或上传文件作为表格的输入。我编写的代码可以一次选择多个文件。

我的问题 我想要的是，在我选择了这些多个文件（例如 3 个）之后，我需要一个 x 或关闭符号或文件名附近的删除按钮。这样当我单击时，我可以单独取消选择或取消选择或删除特定文件。我附上了我想要的示例图片。

请告诉我是否有任何方法可以按索引删除列表值

Sampleimageofthat

如果我的问题不清楚，请在下方评论

我的html代码：

 <td>
    <ng-container>
     <input style="width:240%" type="file" id="file" multiple
         (change)="getFile($event)" >
      </ng-container>
</td>

我的ts代码：

myFiles:string [] = [];
getFile (e) {
for (var i = 0; i < e.target.files.length; i++) { 
  this.myFiles.push(e.target.files[i]);
}}

我还在下面附上了我的 stackblitz 供您参考：

Stackblitz：https://stackblitz.com/edit/angular-ivy-4vnwed?file=src%2Fapp%2Fapp.component.ts

Answer 1

在您的 html 中，您忘记在 f 变量之前添加 "let"

<li *ngFor="let f of files">

在您的 app.components.ts 文件中，尝试使用过滤器而不是映射。 this.files.map() 没有过滤掉元素。控制台记录输出以进行调试

  removeFile(i: number) {
   this.files = this.files.filter(x => x.index != i);
  }