时间戳

首页 > 解决方案 > 使用角度附近的删除按钮选择多个文件

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

问题描述

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

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

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

样本图像

如果我的问题不清楚，请在下面发表评论

我的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

标签： javascriptjqueryangulartypescriptangular5

解决方案

在您的 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);
  }

推荐阅读