选择附近有删除按钮的多个文件 angular

Question

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

我的问题 我想要的是，在我选择了这些多个文件（例如 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() 没有过滤掉元素。控制台将输出记录到 debug

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

选择附近有删除按钮的多个文件 angular

Choose multiple files with a delete button nearby angular

javascript

jquery

typescript

angular

angular5