时间戳

首页 > 解决方案 > Angular 8 Button type="file" 不会打开文件选择对话框

dialog - Angular 8 Button type="file" 不会打开文件选择对话框

问题描述

最近出现了一个新错误，它禁用了文件选择对话框的输出窗口。

<!-- shown in Maximilian Schwarzmuller Angular & NodeJS - The MEAN Stack Guide -->
<form [formGroup]="form" style="width: 100%">

   <div class="row" [ngStyle]="{'height': editing[0] ? 'fit-content' : '200%'}">
      <div class="col-12 d-flex justify-content-center" *ngIf="editing[0]">
         <button mat-button [color]="'edit-color'" type="button" (click)="image.click()">Add Image</button>
      </div>
      <input type="file" (change)="onImagePicked($event)" (click)="clicked()" #image>
   </div>

   ...form of image display...

</form>

每当我在 mat-button 中调用单击事件时，它总是被调用，与 type="file" 相同，但我应该选择文件的对话框永远不会打开。

我认为问题源于此页面位于 mat-dialog 内，这可能与浏览器内部对话框有某种冲突。

目前，在开发和生产中，chrome 和 safari 中出现了错误。

我正在寻找一种在当前页面架构中打开文件对话框（浏览器）的方法。

标签： dialogangular8

解决方案

奇怪的是问题不是对话。这是一个在 html 中调用的点击事件。

<h2 matRipple (click)="hamburgerClicked = !hamburgerClicked">
   <i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>

我只是把它改成了一个函数

<h2 matRipple (click)="clicked()">
   <i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>

它就像一个魅力。

推荐阅读