Sie können ViewChild
damit auf die Eingabe in Ihrer Komponente zugreifen. Zuerst müssen Sie #someValue
Ihre Eingabe ergänzen , damit Sie sie in der Komponente lesen können:
<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
Dann müssen Sie in Ihrer Komponente importieren ViewChild
aus @angular/core
:
import { ViewChild } from '@angular/core';
Anschließend können Sie ViewChild
auf die Eingabe aus der Vorlage zugreifen:
@ViewChild('myInput')
myInputVariable: ElementRef;
Jetzt können Sie myInputVariable
die ausgewählte Datei zurücksetzen, da es sich um eine Referenz für die Eingabe handelt #myInput
, z. B. um eine Erstellungsmethode reset()
, die beim click
Ereignis Ihrer Schaltfläche aufgerufen wird :
reset() {
console.log(this.myInputVariable.nativeElement.files);
this.myInputVariable.nativeElement.value = "";
console.log(this.myInputVariable.nativeElement.files);
}
Erstens console.log
wird die ausgewählte Datei console.log
gedruckt , zweitens wird ein leeres Array gedruckt, da this.myInputVariable.nativeElement.value = "";
ausgewählte Datei (en) aus der Eingabe gelöscht werden. Wir müssen verwenden this.myInputVariable.nativeElement.value = "";
, um den Wert der Eingabe zurückzusetzen, da das FileList
Attribut der Eingabe schreibgeschützt ist , sodass es unmöglich ist, nur ein Element aus dem Array zu entfernen. Hier arbeitet Plunker .