角文件输入更改事件根本不触发

Question

有没有人用有角的文件输入。当声明为( change )时，我无法让change事件触发，但是当使用onchange时，它是有效的，但不适用于角方法。是否有人成功地使用(更改)事件？不知道我在这里错过了什么。

这很管用..。

​

<input hidden mat-input onclick="this.value = null" onchange=”alert(‘works’)” #fileInput type="file">

​

这不管用..。

​

<input hidden mat-input onclick="this.value = null" (change)=”alert(‘works’)”  #fileInput type="file">

​

Answer 1

<input mat-input (change)="onChange()" #fileInput type="file" />

Answer 2

//app.component.html

<div>
   <label for="file">file</label>
   <input hidden id="file" #file name="file" type="file" (change)="onFileSelected($event)">
</div>


//app.component.ts

onFileSelected(event){
  const file = event.target.files[0];
  //do what you want with the event
}

Answer 3

您无法访问模板中的全局方法。要解决此问题，可以添加链接到Window对象的属性：

@Component({...})
export class AppComponent {
    window = window;
}

并从模板调用它：<input (change)="window.alert('test')" type="file">

另一种方法是在组件方法中使用全局方法：

@Component({...})
export class AppComponent {
    testMethod(text) {
        alert(text)
    }
}

Html：<input (change)="testMethod('test')" type="file">

备注：也请使用适当的引号："''"，not：”‘‘”