Angular 2 - INPUT 元素类型文件的重置值答案

【问题标题】：Angular 2 - Reset value of INPUT element type FILEAngular 2 - INPUT 元素类型文件的重置值
【发布时间】：2016-06-20 19:11:37
【问题描述】：

在一个 angular2 应用程序中，我有一个无辜的 html INPUT 元素（类型 FILE），我用它来选择一个文件。这是那个家伙

<input #selectedImage id="selectImage" type="file" name="image" (change)="imageSelected($event)">

一旦用户单击“重置”按钮，我需要能够重置选择。如果我使用 @ViewChild 装饰器并通过代码操作输入元素，我可以轻松做到这一点，即

@ViewChild('selectedImage') selectedImageFile;

reset() {
    this.selectedImageFile.nativeElement.value = '';
}

现在我想通过属性绑定来做同样的事情，在这里我发现了障碍。我将代码更改如下

<input id="selectImage" type="file" name="image" value={{selectedImageFile}} (change)="imageSelected($event)">

reset() {
        this.selectedImageFile = '';
}

但现在没有任何效果（即，当我单击重置按钮时，INPUT 元素的选择不会被清除）。我确信我错过了一些非常微不足道的东西，但有时会发生，我的眼睛现在是瞎的。任何帮助将不胜感激。

【问题讨论】：

您是否在输入标签中尝试过[value]="selectedImageFile"？
是的。结果相同。无论如何谢谢
您找到解决此问题的方法了吗？我需要类似的东西。

标签： angular angular2-template

【解决方案1】：

我不知道为什么它最初不起作用，但无论如何它对于连续调用都不起作用，因为您需要将 selectedImageFile 设置为值 != '' 以便 Angular 识别更改。

在第一个 reset() 之后，它将是 ''，并且每个后续调用都将被忽略，因为没有变化。

将其设置为值!= '' 会引发错误，因为<input type="file"> 不允许以编程方式设置与'' 不同的值。

【讨论】：