Question

我是新手，在使用 input type =“ file” 使用以下代码从文件夹中选择文件时，我试图显示带有“删除”按钮的标签列表，

 <input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>

我想通过使用 ngFor 选项在相应行中单击“删除”按钮来从该列表中删除添加的文件名。有人可以建议我实现这一目标吗？预先感谢。

Answer 1

在ts文件中

    files = [];

    onFileChange(event) {
        if (event.target.files && event.target.files.length > 0) {
            this.selectedFile = event.target.files[0];
            this.files.push(this.selectedFile);
        }
    }

    removeFile(index) {
           this.files.splice(i, 1);
    }

在html文件中

    <input #fileInput type="file" (change)="onFileChange($event)"/> 
    <button type="button" (click)="fileInput.click()">trigger</button>

    <div *ngFor="let file of files;let i = index;">
      {{file.name}} <span (click)="removeFile(i)"> Remove</span>
    </div>

Answer 2

只需在您的remove函数中传递相应的元素并删除该输入字段的值，如下所示-

<div *ngFor='let item of list; let i = index'>
  <input #fileInput type="file"  />
  <button type="button" (click)="fileInput.click()">trigger</button>
  <button type="button" (click)="reset(fileInput, i)">Reset</button>
</div>


reset(element, index) {
    console.log(element);
    element.value = "";
  }

Working Example

如何使用angular 4中的input type =“ file”和ngFor在带有remove选项的标签中添加所选文件名？

2 个答案: