使用角度附近的删除按钮选择多个文件 [英] 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

Sampleimageofthat

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

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>

我的 ts 代码:

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

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

I have also attached my stackblitz below for your reference:

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

推荐答案

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

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屋！