Question

在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元素的选择不会被清除）。我相信我错过了一些非常微不足道的东西但是，有时会发生，我的眼睛现在已经失明了。任何帮助将不胜感激。

Answer 1

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

在第一个reset()之后，''将会被忽略，因为没有任何变化。

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

Angular 2 - INPUT元素类型FILE的重置值

1 个答案: