如何在Angular 9中使用输入标签文件类型重置所选文件？

要使用输入标签文件类型重置所选文件，我们可以实现一种方法，该方法在调用时将清除所选文件。

方法：

• 使用“＃”设置输入的ID，以使其在组件内部可读。
• 现在，在组件中，我们可以使用ViewChild指令从HTML视图读取输入的值。
• 为此，请从@ angular / core导入ViewChild。

import { ViewChild } from '@angular/core';

• ViewChild允许您为输入设置参考变量，从而可以清除输入的值。
• 使用参考变量清除输入值后，将重置所选文件。

例子：

我们将创建一个类似的场景，将有一个输入字段，任务是创建一个按钮，单击该按钮将重置所选文件。

Javascript

import { Component,ViewChild,ElementRef } from '@angular/core';
  
@Component({
  selector: 'app-root',
  template: `
  

  

    {{title}}
  
  
    
  
    
  Clear
  
  `,
  styleUrls: []
})
export class AppComponent {
  title = 'Tutorial'; 
  
// ViewChild is used to access the input element.
  
  @ViewChild('takeInput', {static: false})
    
// this InputVar is a reference to our input.
  
  InputVar: ElementRef;
  
  reset() 
  {
    
// We will clear the value of the input 
// field using the reference variable.
  
    this.InputVar.nativeElement.value = "";
  }
}

输出：

选择文件后：

按下清除按钮后：