选择多个文件，并在附近有一个删除按钮 [英] Choose multiple files with a delete button nearby angular

问题描述

简介:我有一个表格，该表格的一列中包含一个选项，用于选择或上传文件作为对该表格的输入.我编写代码的方式是可以一次选择多个文件.

Introduction: I have a table where in a column it consists of an option to choose or upload files as an input to the table. I have written code in such a way that I can choose multiple files all at once.

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

My problem What I want is that after I choose those multiple files(lets say 3 for an example), I need a x or a close symbol or a delete button near the filename. So that When I click that I could unchoose or unselect or delete the particular file alone. I am attaching a sample image of how I want.

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

And please tell me if there is any way to remove list values by index

示例图像

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

Kindly comment below if my question is unclear

我的html代码:

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

我的交易代码:

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

我还在下面附上了我的堆叠闪电战供您参考:

I have also attached my stackblitz below for your reference:

Stackblitz :推荐答案

在您的html中，您忘记在 f 变量

In your html your forgot to add a "let" before f variable

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

在您的app.components.ts文件中，尝试使用过滤器而非地图.this.files.map()不会过滤掉元素.控制台记录输出以进行调试

In your app.components.ts file, try to use filter not map. this.files.map() isn't filtering out the elements. Console log the output to debug

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

这篇关于选择多个文件，并在附近有一个删除按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！