Angular2 如何触发(点击)事件

Question

我有一个div和ion-input #fileInput type="file" accept="image/*" id="fileInput" [(ngModel)]="imageFilePath" (ionChange)="imageFilePath_change($event)" ></ion-input>

如何使用div模拟ion-input组件的点击？

我的 HTML 代码是：

<div (click) = "fileInput.click()">
<img src="assets/img/camera_button.png" [ngStyle]="{'position': 'fixed', 'top': '30vw', 'left': '32vw', 'height': '30px', 'color': '#0080FF'}">
<ion-input #fileInput type="file" accept="image/*" id="fileInput" [(ngModel)]="imageFilePath" (ionChange)="imageFilePath_change($event)" ></ion-input>
<span [ngStyle]="{'position': 'fixed', 'top': '32vw', 'left': '42vw', 'color': '#0080FF'}">{{ 'addMorePhotosBtn' | translate }}</span>
</div>

错误是：

TypeError: jit_nodeValue_20(...).click is not a function

Answer 1

这是我在单击div 时文件的工作示例。

网页文件

<ion-list>
<ion-item (click)="onImageClick()">
<div>
<ion-icon ios="ios-add-circle" md="md-add-circle"></ion-icon>
Add Files
</div>
</ion-item>
</ion-list>

打字稿文件

public onImageClick() {
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*'); //you can change also file type as **'file/*'**
input.setAttribute("multiple", ""); // If you dont want multiple select file pls remove this line
input.addEventListener('change', (event: any) => {      
let fileList: File[] = event.target.files;
console.log("File List Object Value",fileList);
});
input.click();
}

非常适合我测试。