在 angular2 应用程序中,我有一个用于选择文件的纯 html 输入元素(类型 FILE)。这是那个人
<input #selectedImage id="selectImage" type="file" name="image" (change)="imageSelected($event)">
我需要能够在用户单击“重置”按钮后重置选择。 如果我使用 @ViewChild 装饰器并通过代码操作输入元素,我可以很容易地做到这一点,即
@ViewChild('selectedImage') selectedImageFile;
reset() {
this.selectedImageFile.nativeElement.value = '';
}
现在我想通过属性绑定(bind)来做同样的事情,但在这里我发现了障碍。我改代码如下
<input id="selectImage" type="file" name="image" value={{selectedImageFile}} (change)="imageSelected($event)">
reset() {
this.selectedImageFile = '';
}
但现在没有任何效果(即,当我单击重置按钮时,输入元素的选择不会被清除)。我确信我遗漏了一些非常微不足道的东西,但有时会发生,我的眼睛现在已经瞎了。任何帮助将不胜感激。
最佳答案
我不知道为什么它一开始不起作用,但无论如何它都不适用于连续调用,因为您需要设置 selectedImageFile
到一个值 != ''
让 Angular 识别这个变化。
先reset()
之后它将是 ''
并且每个后续调用都将被忽略,因为没有变化。
将其设置为一个值 != ''
会抛出错误,因为 <input type="file">
不允许设置与 ''
不同的值以编程方式。
关于Angular 2 - INPUT 元素类型 FILE 的重置值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35840292/