如何在Angular 2中使用input标签的文件类型来重置所选文件？

17 浏览
0 Comments

如何在Angular 2中使用input标签的文件类型来重置所选文件？

这是我的输入标签的样子：

我想在Angular 2中重置所选的文件。非常感谢您的帮助。如果您需要更多细节，请告诉我。

附言：

我可以从$event参数中获取文件详细信息并将其保存在一个TypeScript变量中，但是这个变量与输入标签没有绑定。

0

3 答案

0 Comments

问题的原因是在Angular 2中，当使用标签的file类型时，需要重置所选的文件。解决方法是在onChange事件中获取文件列表后，将event.target.value设为null。

解决方法的具体代码如下：

onChange(event) {
  // 获取文件列表
  const files: FileList = event.target.files;
  // 清空输入
  event.target.value = null;
}

这个方法的好处是无需使用按钮，只需要在onChange事件中重置输入即可。

在更新后的代码中，将event.srcElement替换为event.target，因为srcElement已被弃用。

这种方法的唯一缺点是允许用户重复选择同一个文件，但可以通过在获取文件后将const files替换为this.files，然后检查this.files是否已存在该文件来防止这种情况发生。这完全取决于您在获取文件后如何处理文件。

(<HTMLInputElement>target).value = null;也是一个可行的方法。

0
0 Comments

问题的原因是：在Angular 2中，如果想要重置选择的文件，需要通过代码来操作input标签的value属性，而不能直接通过reset()函数来实现。

解决方法如下：

1. 在HTML文件中，添加一个input标签，并加上type="file"属性，同时给标签添加一个本地引用变量#inputFile。

2. 添加一个按钮，用于触发重置文件的操作，设置(click)事件为reset()函数。

3. 在组件的template文件中，添加一个本地引用变量myInputVariable，并在reset()函数中通过该变量来获取input标签的元素。

4. 在reset()函数中，通过myInputVariable.nativeElement.value = ''的方式将input标签的value属性重置为空字符串。

示例代码如下：

HTML文件：

组件的template文件：

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  @ViewChild('inputFile') myInputVariable: ElementRef;
  reset() {
    this.myInputVariable.nativeElement.value = '';
  }
}

需要注意的是，按钮是可选的，只是为了演示重置文件的操作。

0
0 Comments

问题的原因：在Angular 2中，如果要重置input标签中选择的文件，需要使用ViewChild来访问组件中的input。但是对于一些开发者来说，使用ViewChild的具体操作可能不太清楚，因此出现了解决这个问题的需求。

解决方法：首先，在input标签中添加#someValue，以便在组件中读取它。然后在组件中导入ViewChild，并使用ViewChild来访问模板中的input。接下来，可以使用myInputVariable来重置选择的文件。例如，创建一个reset()方法，在按钮的click事件中调用该方法。在reset()方法中，将myInputVariable.nativeElement.value设置为空字符串，以删除input中选择的文件。最后，通过设置ViewChild的类型为ElementRef来正确使用它。

这样做足以清除value中的值this.myInputVariable.nativeElement.value = ""。如果你要清除选择的文件，这将清除input中选择的文件。

需要注意的是，myInputVariable是ElementRef类型的。如果有一个变量数量的"input type=file"，使得id是动态生成的，可以使用动态生成的id来访问每个input。

在Angular 8中，可以使用{static: false}来解决ViewChild的问题。指定ViewChild的类型为ElementRef可以帮助正确使用它。

0