[解決済み] Angular 2で入力タグのファイルタイプで選択されたファイルをリセットする方法は？

質問

入力タグはこんな感じです。

<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>

Angular 2で選択したファイルをリセットしたいです。ヘルプは非常に高く評価されます。詳細が必要であれば教えてください。

追伸

私はファイルの詳細を $event パラメータからファイルの詳細を取得し、typescript変数に保存することができますが、この変数はinputタグにバインドされていません。

どのように解決するのですか？

この場合 ViewChild を使用して、コンポーネント内の入力にアクセスすることができます。まず最初に #someValue を入力に追加して、コンポーネントで読み込めるようにします。

<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">

次に、コンポーネントの中で、インポートする必要があります ViewChild から @angular/core :

import { ViewChild } from '@angular/core';

次に ViewChild を使ってテンプレートからの入力にアクセスします。

@ViewChild('myInput')
myInputVariable: ElementRef;

これで myInputVariable で入力への参照なので、選択されたファイルをリセットするために #myInput であるため、選択したファイルをリセットします。 reset() で呼び出される click イベント時に呼び出されます。

reset() {
    console.log(this.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
}

まず console.log は選択したファイルを印刷し、2番目の console.log は空の配列を表示します。 this.myInputVariable.nativeElement.value = ""; は選択されたファイルを入力から削除するからです。そのため this.myInputVariable.nativeElement.value = ""; を使って入力の値をリセットする必要があります。なぜなら、入力の FileList 属性は 読み出し専用 であるため、配列から項目を削除することはできません。以下は、動作中の プランカー .