刷新输入类型文件

Question

我正在开发一个 Angular 项目。

当我导入多个文档时，我收到“两个文档”消息。没什么问题。

当我按下我创建的删除按钮时，问题就出现了。它允许清空我的列表，但显示总是写有“两个文档”

我希望我有那个。就像我们第一次访问该页面时一样（“未选择文件”）：

我怎样才能在不重新加载页面的情况下重新加载此输入？

我的代码：

html：

<div class="form-group">

          <label for="pj">Pièce jointe</label>

          <div fxLayout="row wrap" fxLayoutAlign="start center">

            <input type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>

            <button type="button" (click)="clearFile()" class="btn btn-link">

              <i class="fas fa-trash fa-lg"></i>

            </button>

          </div>

        </div>

TS：

 clearFile() {

 this.message.files = null;

 }

Answer 1

如果您使用反应式表单，则只需调用reset()表单控件即可。组件.html<form [formGroup]="form">&nbsp;&nbsp;&nbsp; <input type="file" multiple formControlName="files" />&nbsp; <button type="button" (click)="clearFile()">&nbsp; &nbsp; Delete&nbsp; </button></form>组件.tsform: FormGroup;ngOnInit() {&nbsp; this.form = new FormGroup({&nbsp; &nbsp; files: new FormControl('')&nbsp; });}clearFile() {&nbsp; this.form.get('files').reset();}演示： https:&nbsp;//stackblitz.com/edit/angular-huvm38

Answer 2

您可以使用它ViewChild来访问组件中的输入。首先，您需要添加#someValue到输入中，以便可以在组件中读取它：<input&nbsp; #myInput type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>然后在您的组件中，您需要ViewChild从以下位置导入@angular/core：import { ViewChild } from '@angular/core';然后您可以使用ViewChild模板访问输入：// ng 8 @ViewChild('myInput', {static: false}) myInput: ElementRef;@ViewChild('myInput') myInput: ElementRef;现在您可以使用myInput来重置所选文件，因为它是对输入的引用#myInput，例如reset()将在click按钮事件时调用的创建方法：reset() {&nbsp; &nbsp; console.log(this.myInput.nativeElement.files);&nbsp; &nbsp; this.myInput.nativeElement.value = "";&nbsp; &nbsp; console.log(this.myInput.nativeElement.files);}