Angular 8 按钮类型= "file" 不会打开文件选择对话框

Question

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

<!-- 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在开发和生产中已经看到了错误。

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

Answer 1

奇怪的是，问题不是对话框。这是一个在 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>

它就像一个魅力。