文件选择器没有显示在单击文件输入

Question

组件html :<input type="file" name="notImportant" (change)="handleFileInput($event)">

组件ts :handleFileInput = e => {console.log(e);}

​

​

这是非常简单的html，当我点击选择文件；什么都没有发生，也没有错误。不确定是否有任何包阻塞默认操作。在我开始api集成之前，它已经开始工作了。添加package.json内容前后的内容。

在此之前：

"dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@coreui/coreui": "^2.1.16",
    "@ng-select/ng-select": "^3.7.1",
    "@ngx-translate/core": "^11.0.1",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },

之后：

"dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@coreui/coreui": "^2.1.16",
    "@ng-select/ng-select": "^3.7.1",
    "@ngx-translate/core": "^11.0.1",
    "@types/axios": "^0.14.0",
    "angular-bluebird": "0.0.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },

更新

如果我把<input type="file" name="notImportant" (change)="handleUpload($event)">放在app.component.html中，它就能工作。

Answer 1

**Check This**

 <button type="button" mat-button (click)="choosefile.click()">ChooseFile</button>      
 <input type="file" #choosefile name="requestfile" (change)="onFileChange($event)" accept="application/pdf, image/*">

 <span>{{filename}}</span>

  onFileChange(event){
  var file = event.target.files[0];
  this.filename= file.name;
  }

Answer 2

同样的事情也发生在我身上。我有一个像Manjunath这样的侧边栏，当我点击外部时关闭它，这很奇怪，但是我改变了(click)="mobile && closeSide == false && closeSide = true"。

至

(click)="CloseSideBar()"


//ts
CloseSideBar(){
   if(this.mobile && this.closeSide == false){
      this.closeSide = true
    }
}

并修复了文件选择器错误。